Uploader 上传

文件上传组件

基本用法

  1. <nut-uploader
  2. name="uploader-demo"
  3. :url="url"
  4. :isPreview="true"
  5. :acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
  6. @start="onStart"
  7. @success="onSuccess"
  8. @fail="onFail"
  9. @progress="onProgress"
  10. @preview="onPreview"
  11. @showMsg="showMsgFn"
  12. typeError="对不起,不支持上传该类型文件!"
  13. limitError="对不起,文件大小超过限制!"
  14. >
  15. 上传
  16. </nut-uploader>
  1. export default {
  2. data() {
  3. return {
  4. url:'https://my-json-server.typicode.com/linrufeng/demo/posts',
  5. };
  6. },
  7. methods:{
  8. onStart(){
  9. console.log('上传开始');
  10. },
  11. onSuccess(file,res){
  12. alert('上传成功!');
  13. },
  14. onFail(file,res){
  15. alert('上传失败!');
  16. },
  17. onProgress(file, loaded, total) {
  18. console.log('上传进度:'+parseInt((100 * loaded) / total)+'%');
  19. },
  20. onPreview(file) {
  21. this.previewImg = file;
  22. },
  23. showMsgFn(msg){
  24. alert(msg);
  25. },
  26. }

高级用法

与吐司 Toast 组件结合使用

  1. <nut-uploader
  2. name="uploader-demo"
  3. :url="url"
  4. @success="onSuccess"
  5. @fail="onFail"
  6. @showMsg="showMsgFn"
  7. >
  8. 上传
  9. </nut-uploader>
  1. export default {
  2. data() {
  3. return {
  4. url:'https://my-json-server.typicode.com/linrufeng/demo/posts',
  5. };
  6. },
  7. methods:{
  8. onSuccess(file,res){
  9. this.$toast.success('上传成功');
  10. },
  11. onFail(file,res){
  12. this.$toast.fail('上传失败!');
  13. },
  14. showMsgFn(msg){
  15. this.$toast.text(msg);
  16. },
  17. }

与按钮 Button 组件结合使用

  1. <nut-uploader
  2. :name="name"
  3. :url="url"
  4. >
  5. <nut-button small>上传</nut-button>
  6. </nut-uploader>

自定义 headers & formData 使用

  1. <nut-uploader
  2. :name="name"
  3. :url="url"
  4. :headers="headers"
  5. :attach="formData"
  6. >
  7. <nut-button small>上传</nut-button>
  8. </nut-uploader>
  1. export default {
  2. data() {
  3. return {
  4. url:'https://my-json-server.typicode.com/linrufeng/demo/posts',
  5. name:'testname',
  6. headers:{
  7. token:'test'
  8. },
  9. formData:{
  10. f1:'test',
  11. f2:'test1'
  12. },
  13. };
  14. },
  15. }

与进度条组件 Progress 结合使用

  1. <nut-uploader
  2. :name="name"
  3. :url="url"
  4. @progress="progress"
  5. > 上传
  6. </nut-uploader>
  7. <nut-progress :percentage="progressNum" :showText="false" strokeWidth="24"/>

预览上传图片

  1. <nut-uploader
  2. :name="name"
  3. :url="url"
  4. :xhrState="stateNum"
  5. :isPreview="true"
  6. @success="demoSuccess"
  7. @fail="demoFail"
  8. @preview="preview"
  9. @showMsg="showMsg1"
  10. >
  11. <nut-button small>上传</nut-button>
  12. </nut-uploader>
  1. preview(file) {
  2. this.previewImg = file;
  3. },

上传图片前处理图片内容

  1. <nut-uploader
  2. :beforeUpload="test"
  3. :name="name"
  4. :url="url"
  5. :xhrState="stateNum"
  6. :acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
  7. @success="demo1Success"
  8. @failure="demo1Fail"
  9. @start="demo1UploadStart"
  10. @showMsg="showMsg"
  11. ><nut-button small>上传图片前处理图片内容</nut-button></nut-uploader>
  1. test(event) {
  2. console.log(event, '可以处理input选择的内容');
  3. // ... 自定义逻辑
  4. return {
  5. event: event,
  6. data: '',
  7. fileBlob: undefined // 强制修改file文件,此参数最终会作为formData中的文件流进行上传,替换event中的file
  8. };
  9. }
  10. },

自定义增加上传图片数据

  1. <nut-uploader
  2. :selfData="selfData"
  3. :name="name"
  4. :url="url"
  5. :xhrState="stateNum"
  6. :acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
  7. @success="demo1Success"
  8. @failure="demo1Fail"
  9. @start="demo1UploadStart"
  10. @showMsg="showMsg"
  11. ><nut-button small>自定义增加上传图片数据</nut-button></nut-uploader>

Prop

字段说明类型默认值
nameinput name的名称String“”
url上传服务器的接口地址String-
multiple是否支持多选Booleanfalse
isPreview是否需要预览Booleanfalse
clearInput是否需要清空input内容,设为true支持重复选择上传同一个文件Booleanfalse
maxSize可以设定最大上传文件的大小(字节)Number5242880
acceptType可以上传文件的类型Array[‘image/jpeg’, ‘image/png’, ‘image/gif’, ‘image/bmp’]
attach附加上传的信息formDataObject{}
headers自定义headersObject{}
xhrState接口响应的成功状态(status)值Number200
typeError文件类型错误提示文案String“不支持上传该类型文件”
limitError文件大小超过限制提示文案String“文件大小超过限制”
xmlError浏览器不支持本组件时的提示文案String“对不起,您的浏览器不支持本组件!”
withCredentials支持发送 cookie 凭证信息Booleanfasle
beforeUpload上传前的函数需要返回一个对象Function{event:$event} $event为点击事件必传
selfData自定义增加上传的数据Object{}

Event

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

tips

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

  1. beforeUpload($e){
  2. return {
  3. event:$e
  4. }
  5. }

Uploader 上传 - 图1