uniapp上传手机相册图片、视频或拍摄图片、视频上传

一开始想用现成组件uView的u-upload来实现，做到一半发现使用这个组件上传图片没有问题，可以满足从相册上传、直接拍摄、预览功能。但是，视频好像不支持预览，不知道是我写法不对还是怎么回事/(ㄒoㄒ)/~~

最终图片使用的u-upload组件，视频用了uniapp API 的 uni.chooseVideo()方法

一、上传或拍摄图片

<!-- 图片 -->
<view class="up-img">
    <view class="up-label">图片：</view>
    <u-upload :fileList="imgList" @afterRead="imgRead" @delete="deletePic" name="1" multiple :previewFullImage="true">
    </u-upload>
</view>

      // 新增图片
      async imgRead(event) {
        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file);
        let fileListLen = this.imgList.length;
        lists.map((item) => {
          this.imgList.push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        });
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadImg(lists[i], i);
          let item = this.imgList[fileListLen];
          this.imgList.splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            accessoryUrl: result
          }));
          fileListLen++;
        }
      },
      // 上传图片
      uploadImg(item, index) {
        return new Promise((resolve, reject) => {
          uni.uploadFile({
            url: baseUrl + `/md/quality/upload`, //需要传图片的后台接口
            filePath: item.url, // 上传图片 通过uni-app的uni-file-picker组件 函数返回
            name: 'file', //文件名字
            header: {
              'Authorization': "Bearer " + getToken(), //token
            },
            formData: {
              type: Object,
              default () {
                return {
                  file: item.name
                };
              }
            },
            success: res => {
              let result = JSON.parse(res.data);
              setTimeout(() => {
                resolve(result.accessoryUrl)
              }, 1000)
            },
            fail: e => {
              console.log(e)
            }
          });

        });
      },
      // 删除图片
      deletePic(event) {
        this.imgList.splice(event.index, 1);
      }

二、上传或拍摄视频

需要用到uni.chooseVideo 和 uni.uploadFile

详细用法参考

uni.chooseVideo(OBJECT) | uni-app官网

 uni.uploadFile(OBJECT) | uni-app官网

   <!-- 视频 -->
   <view class="up-video">
     <view class="up-label">视频：</view>
       <view class="up-video-box">
         <view class="v-box" v-show="videoList.length" v-for="(item,i) in videoList" :key="i">
          <view class="v-inner">
             <video style="width: 172px;height: 72px;" :src="item.accessoryUrl"></video>
          </view>
          <view class="c-icon">
             <u-icon @click="deleteVideo(i)" name="close" color="#fff" size="8"></u-icon>
          </view>
         </view>
         <view class="box-s" @click="videoRead">
            <u-icon name="camera-fill" color="#d3d4d6" size="26"></u-icon>
         </view>
       </view>
  <!-- <u-upload :fileList="videoList" @afterRead="videoRead" @delete="deleteVideo" name="2" multiple
            :previewFullImage="true" accept="video"></u-upload> -->
   </view>

     videoRead() {
        let that = this;
        let arr = [];
        let strPath = "";
        uni.chooseVideo({
          sourceType: ['camera', 'album'],
          success: function (res) {
            arr = res.tempFilePath.split("/");
            strPath = arr[arr.length - 1];
            that.videoList.push({
              accessoryUrl: res.tempFilePath,
              videoName: strPath
            });
            that.addUpload([{
              accessoryUrl: res.tempFilePath,
              videoName: strPath
            }]);
          }
        });
      },
      //文件提交上传
      addUpload(videoArr) {
        if (videoArr.length) {
          videoArr.forEach(item => { //这里之所以循环一个一个上传是因为，我是用于小程序端的，目前uniapp不支持微信小程序以文件列表形式上传，
            uni.uploadFile({
              url: baseUrl + `/md/quality/uploadVideo`, //需要传图片的后台接口
              filePath: item.accessoryUrl, // 上传图片 通过uni-app的uni-file-picker组件 函数返回
              name: 'file', //文件名字
              header: {
                'Authorization': "Bearer " + getToken(), //token
              },
              formData: {
                type: Object,
                default () {
                  return {
                    file: item.videoName
                  };
                }
              },
              success: res => {
                let result = JSON.parse(res.data);
                this.videoList.map(v => {
                 if(v.videoName === item.videoName) {
                   v["accessoryUrl"] = result.accessoryUrl;
                 }
                });
              },
              fail: e => {
                console.log(e)
              }
            });
          });
        }
      },
      deleteVideo(index) {
        this.videoList.splice(index, 1);
      }

    .up-video {
      display: flex;

      .up-video-box {
        width: calc(100% - 105px);
        display: flex;
        flex-wrap: wrap;

        .v-box {
          width: 185px;
          height: 82px;
          position: relative;
          overflow: hidden;
          margin: 0 8px 8px 0;
          padding: 10px 10px 0px 0px;
          box-sizing: border-box;
          background: #010101;

          .v-inner {
            position: absolute;
            bottom: 0px;
            left: 0px;
          }

          .c-icon {
            position: absolute;
            top: -7px;
            right: -7px;
            background: #373737;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 6px 6px 0px 0px;
            box-sizing: border-box;
          }
        }

        .box-s {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 80px;
          height: 80px;
          background-color: #f4f5f7;
          border-radius: 2px;
          margin: 0 8px 8px 0;
          box-sizing: border-box;
        }
      }

    }

tips: 代码里的baseUrl 是服务器地址 ip+端口完整地址， getToken()是获取token方法

三、效果展示

 这世界很喧嚣，做你自己就好