upnNetRes 上传网络文件

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. rup.defaultFile.upOpenDown=true; //打开下载开关
  8. Vue.prototype.$rup = rup; //挂载到原型上
局部使用
  1. import rup from '@/common/request/request-upFiles.js';
  2. rup.defaultUp.url='https://www.easy-mock.com/mock/5ca6ec41215a7b66ff10343d/'
  3. rup.defaultFile.upOpenDown=true; //打开下载开关
  4. const res = await rup.upnNetRes({
  5. netPath:['https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=421118981,56990953&fm=27&gp=0.jpg'],
  6. upPath:'example/upload',
  7. files:['image'], //服务端用于接收图片的名称
  8. title: '正在上传', //显示上传的提示
  9. })
  10. console.log(res);

代码演示

1.简单使用
  1. const res = await this.$rup.upnNetRes({
  2. netPath:['https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=421118981,56990953&fm=27&gp=0.jpg'],
  3. upPath: 'example/upload', //换成自己的路径
  4. files:['image'], //服务端用于接收图片的名称
  5. });
  6. console.log(res);
2.带上传提示
  1. const res = await this.$rup.upnNetRes({
  2. netPath:['https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=421118981,56990953&fm=27&gp=0.jpg'],
  3. upPath: 'example/upload', //换成自己的路径
  4. files:['image'], //服务端用于接收图片的名称
  5. title: '正在上传',
  6. });
  7. console.log(res);
3.批量上传网络文件
  1. const res = await this.$rup.upnNetRes({
  2. netPath:['https://img.alicdn.com/imgextra/i3/117331861/TB24K.sayMnBKNjSZFCXXX0KFXa_!!0-saturn_solar.jpg_180x180.jpg','https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=421118981,56990953&fm=27&gp=0.jpg'],
  3. upPath: 'example/upload', //换成自己的路径
  4. files:['image0','image1'], //服务端用于接收图片的名称
  5. title: '正在上传',
  6. });
  7. console.log(res);
4.携带额外表单参数
  1. const res = await this.$rup.upnNetRes({
  2. netPath:['https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=421118981,56990953&fm=27&gp=0.jpg'],
  3. upPath: 'example/upload', //换成自己的路径
  4. files:['image'], //服务端用于接收图片的名称
  5. title: '正在上传',
  6. extra:{
  7. name:'hhyang',
  8. ages:21
  9. },
  10. });
  11. console.log(res);
5.上传拦截示例
  1. const res = await this.$rup.upnNetRes({
  2. netPath:['https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=421118981,56990953&fm=27&gp=0.jpg'],
  3. upPath: 'example/upload', //换成自己的路径
  4. files:['image'], //服务端用于接收图片的名称
  5. title: '正在上传',
  6. abort:(info,bt)=>{
  7. if(info.args.index==0){
  8. bt.abort();
  9. }
  10. },
  11. });
  12. console.log(res);

upnNetRes参数

属性名类型默认值必填描述
upPathString/Array用于上传到服务器的路径。如果是字符串则会根据 ‘,’ 默认分割成数组,如果此参数分割为数组和netPath参数长度不匹配,则不匹配部分统一使用upPath最后一位。
netPathString/Array需要下载的目标对象,如果为String则通过 ‘,’ 默认分割成数组。
filesArray服务器接收的名称,如果上传的netPath集合有多个,而files数组中只有一个。则上传的名称全部为数组中的那个值,所以files必须和netPath上传的文件对应
titleBoolean/Stringfalse传入字符串则显示 推荐 7 个字内
extraObject上传文件时需要额外附带的表单参数
abortFunction请求触发正真上传时会触发此方法,回调第一个为当前上传的信息,第二个为requestTask对象
[…ages]ObjectajaxFile 所有支持的参数及一些自定义的额外参数