uview+vue2+uniapp上传文件

效果图

1.template部分

<view class="picter">
          <view class="chose"> 选择文件: </view>

          <view class="check">
            <u-upload
              :fileList="fileList1"
              @afterRead="afterRead"
              @delete="deletePic"
              name="1"
              :multiple="true"
              :maxCount="9"
              width="112rpx"
              accept="file"
              height="109rpx"
              :deletable="true"
              :previewImage="true"
            >
              <image
                src="/static/up.png"
                mode="widthFix"
                style="width: 112rpx; height: 110rpx"
              ></image>
              <!-- <u-icon name="plus"></u-icon> -->
            </u-upload>
          </view>
        </view>

2.js部分
定义变量：fileList1: []，FileId: [],

import config from "../../config/index";
import { GET_TOKEN } from "../../utils/user";
methods：{

  deletePic(e) {
    console.log(this.FileId,'view');
      console.log(e,'eee');
      this[`fileList${e.name}`].splice(e.index, 1);
      console.log(this[`fileList${e.name}`],'蛤？');
      this.FileId = this.FileId.filter((item) => item !== e.file.id);
    },
     // 新增图片
     async afterRead(event) {
      console.log(event);
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        console.log("1111");
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        console.log(lists[i].url, "2222");

        await this.uploadFilePromise(lists[i].url);
        // let id = JSON.parse(result);
        // console.log(result,'result');
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            // url: '',
            id: this.Id,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          //url: this.$common.domain+'/api/common/upload', // 仅为示例，非真实的接口地址
        url: config.url+'Wjgl/uploadFiles',  
           
          filePath: url,
          name: "files",
          formData: {},
          header: {
            Authorization: "Bearer " + GET_TOKEN().token,
          },
          success: (res) => {
            this.Id = JSON.parse(res.data).data.id;
            this.FileId.push(JSON.parse(res.data).data.id);
            setTimeout(() => {
              resolve(res.data.data);
            }, 1000);
          },
        });
      });
    },
    //保存
    save(){
   // this.form.filesId为所要
this.form.filesId=this.FileId.toString()
}
}

3.样式部分

<style lang="scss">
.picter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  .chose {
    width: 65px;
    margin-left: 25px;
    color: black;
  }
  .check {
    margin-right: 30px;
    width: 280px;
  }
}
</style>

附：上面的config、GET_TOKEN
1）
2）

4.至此，已经完成了文件上传的部分。接下来，完成从后端获取数据，进行文件回显（简易版）。
js部分
options.filesId为文件id用‘，’隔开的字符串。

onLoad(options) {
 this.form= options;
  if(options.filesId){
    this.form.fileInfoList=JSON.parse(options.fileInfoList)
    this.FileId=options.filesId.split(',')
    this.FileId.forEach(item=>{
      this.fileList1.push({url: 'blob:http://localhost:8080/1bf0a2bd-e961-4f7f-87e5-485928e41xxx'})
    })
  }
}