Uploader 上传

文件上传组件

基本用法

<nut-uploader
    name="uploader-demo"
    :url="url"
    :isPreview="true"
    :acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
    @start="onStart"
    @success="onSuccess"
    @fail="onFail"
    @progress="onProgress"
    @preview="onPreview"
    @showMsg="showMsgFn"
    typeError="对不起，不支持上传该类型文件！"
    limitError="对不起，文件大小超过限制！"
>
上传
</nut-uploader>   

export default { 
  data() {
    return {
      url:'https://my-json-server.typicode.com/linrufeng/demo/posts',    
    };
  },
  methods:{
      onStart(){
        console.log('上传开始');
      },
      onSuccess(file,res){
        alert('上传成功！');
      },
      onFail(file,res){
        alert('上传失败！');
      },
      onProgress(file, loaded, total) {
        console.log('上传进度:'+parseInt((100 * loaded) / total)+'%');
      },
      onPreview(file) {
        this.previewImg = file;
      },
      showMsgFn(msg){
        alert(msg);
      },
  }

高级用法

与吐司 Toast 组件结合使用

<nut-uploader
    name="uploader-demo"
    :url="url"
    @success="onSuccess"
    @fail="onFail"
    @showMsg="showMsgFn"
>
上传
</nut-uploader>   

export default { 
  data() {
    return {
      url:'https://my-json-server.typicode.com/linrufeng/demo/posts',    
    };
  },
  methods:{
      onSuccess(file,res){
        this.$toast.success('上传成功');
      },
      onFail(file,res){
        this.$toast.fail('上传失败！');
      },
      showMsgFn(msg){
        this.$toast.text(msg);
      },
  }

与按钮 Button 组件结合使用

<nut-uploader
  :name="name"
  :url="url"    
  >
  <nut-button small>上传</nut-button>
</nut-uploader>   

自定义 headers & formData 使用

<nut-uploader
  :name="name"
  :url="url"
  :headers="headers"
  :attach="formData"
  >
  <nut-button small>上传</nut-button>
</nut-uploader>   

export default { 
  data() {
    return {
      url:'https://my-json-server.typicode.com/linrufeng/demo/posts', 
      name:'testname',
      headers:{
        token:'test'
      },
      formData:{
        f1:'test',
        f2:'test1'
      },
    };
  },
}

与进度条组件 Progress 结合使用

<nut-uploader
    :name="name"
    :url="url"
    @progress="progress"    
    > 上传
</nut-uploader>  
<nut-progress :percentage="progressNum" :showText="false" strokeWidth="24"/>

预览上传图片

 <nut-uploader
    :name="name"
    :url="url"
    :xhrState="stateNum"
    :isPreview="true"
    @success="demoSuccess"
    @fail="demoFail"
    @preview="preview"
    @showMsg="showMsg1"
  >
    <nut-button small>上传</nut-button>
  </nut-uploader>

preview(file) {
  this.previewImg = file;
},

上传图片前处理图片内容

 <nut-uploader
    :beforeUpload="test"
    :name="name"
    :url="url"
    :xhrState="stateNum"
    :acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
    @success="demo1Success"
    @failure="demo1Fail"
    @start="demo1UploadStart"
    @showMsg="showMsg"
  ><nut-button small>上传图片前处理图片内容</nut-button></nut-uploader>

test(event) {
    console.log(event, '可以处理input选择的内容');
    // ... 自定义逻辑
    return {
      event: event,
      data: '',
      fileBlob: undefined // 强制修改file文件，此参数最终会作为formData中的文件流进行上传，替换event中的file
    };
}
},

自定义增加上传图片数据

<nut-uploader
    :selfData="selfData"          
    :name="name"
    :url="url"
    :xhrState="stateNum"
    :acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
    @success="demo1Success"
    @failure="demo1Fail"
    @start="demo1UploadStart"
    @showMsg="showMsg"
  ><nut-button small>自定义增加上传图片数据</nut-button></nut-uploader>

Prop

Event

tips

使用 beforeUpload 一定要返回一个JSON 对象且 event 为必传字段

beforeUpload($e){
  return {
    event:$e
  }
}