nutui/src/packages/uploader/doc.md

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"/>

Prop

字段	说明	类型	默认值
name	input name的名称	String	""
url	上传服务器的接口地址	String	-
isPreview	是否需要预览	Boolean	false
clearInput	是否需要清空input内容，设为true支持重复选择上传同一个文件	Boolean	false
maxSize	可以设定最大上传文件的大小（字节）	Number	5242880
acceptType	可以上传文件的类型	Array	['image/jpeg', 'image/png', 'image/gif', 'image/bmp']
attach	附加上传的信息formData	Object	{}
headers	自定义headers	Object	{}
xhrState	接口响应的成功状态（status）值	Number	200
typeError	文件类型错误提示文案	String	"不支持上传该类型文件"
limitError	文件大小超过限制提示文案	String	"文件大小超过限制"
xmlError	浏览器不支持本组件时的提示文案	String	"对不起，您的浏览器不支持本组件！"
withCredentials	支持发送 cookie 凭证信息	Boolean	fasle

Event

名称	说明	回调参数
start	文件上传开始	-
progress	文件上传的进度	上传文件、已上传数据量、总数据量
preview	isPreview为true时可通过此方法获文件的Base64编码，一般用于预览	文件的Base64编码
success	上传成功	文件、responseText
failure	上传失败	文件、responseText
showMsg	组件抛出信息的处理函数	组件抛出的提示信息