startUpFiles 开始上传文件

return: Promise

使用指南

全局使用 (推荐)
  1. //main.js
  2. import rup  from '@/common/request/request-upFiles.js';    //文件路径请换成本地路径
  3. rup.defaultUp.url='https://www.easy-mock.com/mock/5ca6ec41215a7b66ff10343d/'
  4. rup.defaultUp.baseData = { //设置公共参数，默认为空，设置此参数后每次发送请求都会带上此参数
  5.     token: '000-000-000-000-defaultUp'
  6. }
  7. Vue.prototype.$rup = rup;   //挂载到原型上
局部使用
  1. import rup  from '@/common/request/request-upFiles.js';
  2. const res = await rup.startUpFiles({
  3.     path: 'https://www.easy-mock.com/mock/5ca6ec41215a7b66ff10343d/example/upload',       //换成自己的路径，如果设置了公共路径可以简写
  4.     files：['image'],   //服务端用于接收图片的名称
  5.     title: '正在上传',  //显示上传的提示
  6. },["blob:http://192.168.0.29:10086/c939121a-0556-49c8-8370-fdf4e7ded7f0"])  //换成自己的文件路径
  8. console.log(res);

代码演示

1.简单使用
  1. const res = await this.$rup.startUpFiles({
  2.     path: 'example/upload',       //换成自己的路径
  3.     files：['image'],   //服务端用于接收图片的名称
  4. },["blob:http://192.168.0.29:10086/c939121a-0556-49c8-8370-fdf4e7ded7f0"])  //换成自己的文件路径
  6. console.log(res);
2.带上传提示
  1. const res = await this.$rup.startUpFiles({
  2.     path: 'example/upload',       //换成自己的路径
  3.     files：['image'],   //服务端用于接收图片的名称
  4.     title: '正在上传',  //显示上传的提示
  5. },["blob:http://192.168.0.29:10086/c939121a-0556-49c8-8370-fdf4e7ded7f0"])  //换成自己的文件路径
  7. console.log(res);
3.多文件上传
  1. const res = await this.$rup.startUpFiles({
  2.     path: 'example/upload',       //换成自己的路径
  3.     files：['image','image1'],   //服务端用于接收图片的名称
  4.     title: '正在上传',  //显示上传的提示
  5. },["blob:http://192.168.0.29:10086/c939121a-0556-49c8-8370-fdf4e7ded7f0","blob:http://192.168.0.29:10086/c939121a-0556-49c8-8370-fdf4e7defsdad"])  //换成自己的文件路径
  7. console.log(res);
4.携带额外表单参数
  1. const res = await this.$rup.startUpFiles({
  2.     path: 'example/upload',       //换成自己的路径
  3.     files：['image'],   //服务端用于接收图片的名称
  4.     title: '正在上传',  //显示上传的提示
  5.     extra:{     //额外参数
  6.         name:'hhyang',
  7.         ages:21
  8.     }
  9. },["blob:http://192.168.0.29:10086/c939121a-0556-49c8-8370-fdf4e7ded7f0"])  //换成自己的文件路径
  11. console.log(res);
5.不上传仅返回上传文件集合
  1. const res = await this.$rup.startUpFiles({
  2.     path: 'example/upload',       //换成自己的路径
  3.     files：['image'],   //服务端用于接收图片的名称
  4.     title: '正在上传',  //显示上传的提示
  5.     extra:{     //额外参数
  6.         name:'hhyang',
  7.         ages:21
  8.     },
  9.     isUp：false,    //不上传
  10. },["blob:http://192.168.0.29:10086/c939121a-0556-49c8-8370-fdf4e7ded7f0"])  //换成自己的文件路径
  12. console.log(res);
6.上传拦截示例
  1. const res = await this.$rup.startUpFiles({
  2.     path: 'example/upload',       //换成自己的路径
  3.     files：['image'],   //服务端用于接收图片的名称
  4.     title: '正在上传',  //显示上传的提示
  5.     abort:(info,bt)=>{
  6.         if(info.args.index==0){     //第一个请求直接拦截
  7.             bt.abort();
  8.         }
  9.     },
  10. },["blob:http://192.168.0.29:10086/c939121a-0556-49c8-8370-fdf4e7ded7f0"])  //换成自己的文件路径
  12. console.log(res);

startUpFiles(Object,blobList)

Object参数

属性名类型默认值必填描述
pathString是用于上传到服务器的路径。可以是完整路径，也可以是去除基础路径后的路径
filesArray是服务器接收的名称，如果上传的blobList集合有多个，而files数组中只有一个。则上传的名称全部为数组中的那个值，所以files必须和blobList上传的文件对应
isUpBooleantrue否用于判断当前是否需要真正的上传文件到服务器,改成false它将直接返回传入的blobList
titleBoolean/Stringfalse否传入字符串则显示 推荐 7 个字内
extraObject否上传文件时需要额外附带的表单参数
abortFunction否请求触发正真上传时会触发此方法，回调第一个为当前上传的信息，第二个为requestTask对象
[…ages]Object否ajaxFile 所有支持的参数及一些自定义的额外参数

blobList参数


必须是一个数组，他是由selectFiles获取到的文件路径集合。它是必填的，你也可以同过AppSelectFiles和otherSelectFiles选择自己相应的方法来完成blobList的组装。最终的数据将会是这样的形式: ['blob:http://192.168.0.29:10086/c939121a-0556-49c8-8370-fdf4e7ded7f0']