selectFiles 选择本地相册文件并上传

return: Promise

使用指南

全局使用 (推荐)
  1. //main.js
  2. import rup from '@/common/request/request-upFiles.js'; //文件路径请换成本地路径
  3. Vue.prototype.$rup = rup; //挂载到原型上
局部使用
  1. import rup from '@/common/request/request-upFiles.js';
  2. const res = await rup.selectFiles({ //选择一张图片并上传
  3. type:0,
  4. upload: {
  5. path: 'example/upload',
  6. files: ['image'],
  7. },
  8. })
  9. console.log(res);

注意事项


selectFiles方法是 AppSelectFilesotherSelectFiles的封装,自动识别是小程序、H5、APP。这三个方法使用都大同小异。如果自己有需要则可以直接明确的选择方法调用。在功能上APP可以直接从相册选择视频或图片,其他端均与官方API相同。


代码演示

1.简单使用
  1. const res = await this.$rup.selectFiles({
  2. type:0, //运行选择两张图片同上上传到example/upload接口
  3. maximum: 2,
  4. upload: {
  5. path: 'example/upload',
  6. files: ['image0','image1'],
  7. },
  8. })
  9. console.log(res);
2.单纯仅选择文件
  1. const res = await this.$rup.selectFiles({
  2. type:0,
  3. maximum: 2,
  4. isUp:false
  5. })
  6. console.log(res);
3.选择指定格式的文件
  1. const res = await this.$rup.selectFiles({
  2. maximum: 2,
  3. isUp:false
  4. sizeType:['original'],
  5. sourceType:['album']
  6. })
  7. console.log(res);
4.基本功能完整使用示例
  1. const res = await this.$rup.selectFiles({
  2. type:1,
  3. maximum: 2,
  4. upload: {
  5. path: 'example/upload',
  6. files: ['image'],
  7. title: '正在上传',
  8. abort:(info,bt)=>{
  9. if(info.args.index==0){
  10. bt.abort();
  11. }
  12. },
  13. extra:{
  14. name:'我是你爸爸',
  15. ages:21
  16. },
  17. username:'hhyang'
  18. },
  19. })
  20. console.log(res)

selectFiles参数

属性名类型默认值必填描述
typeNumber2用于选择文件的类型:0:图片,1:视频,2:视频及图片
isUpBooleantrue用于判断在选择完成文件后是否调用上传接口
maximumNumber1最大选择文件的个数,最大为9。H5上只能出现多选,无法限定数量
multipleBooleantrue是否开启多选模式,如果改为false。maximum参数将会无效,此参数建议不要动,修改maximum来开始多选或者是关闭多选
sizeTypeArray/String['original', 'compressed']original 原图,compressed 压缩图。此参数对APP、H5无效
sourceTypeArray/String['album','camera']album 从相册选图,camera 使用相机
uploadObject详细
[…ages]Object额外 plus.gallery.pickuni.chooseImage 两支持的参数