htmledit_views">

<template>

<u-upload

     ref="uUpload"

    :file-list="fileList"

    accept="image/jpeg,image/png"    //允许选择图片文件

     :sizeType="sizeType"

     :max-size="2 * 1024 * 1024"    //限制上传的图片文件最大为 2M

     @oversize="oversize"

    @on-remove="deleteImgs"    //移除

    :auto-upload="false"    //禁止自动上传选择的图片文

    max-count="9"     //限制最多只能选择几个图片文件       

   :show-progress="false"     //不显示文件上传进度条

   multiple    //多图
   :previewFullImage="true"    //预览图片时显示完整的原图

   @on-choose-complete="onChooseComplete">
</u-upload>
</template>

html" title=javascript>javascript"><script>
  export default {
    data() {
      return {
         fileList: [], //文件列表
      }
    },
    methods: {
      // 文件超出大小限制
      oversize() {
          uni.showToast({
            title: "图片最大不能超过2M",
            icon: 'none'
          })
      },

    onChooseComplete(event) {
      this.multipleUpload(this.$refs.uUpload.lists, 2)
    },
    // 多张图片上传
    multipleUpload(event, type) {
      let num = 9;
      event.map(item => {
        if (num === event.length) {
          uni.showToast({
            title: '最多上传9张图片',
            icon: 'none'
          })
          return
        }
        num += 1
        this.uploadDo(item, type)
      })
    },
    uploadDo(event, type) {
      uni.uploadFile({
        url: "http://192.168.2.105:18100/file/uploadFile",//仅为示例，非真实的接口地址
        filePath: event.file.path,
        name: "file",
        header: {
          Authorization: `Bearer  +uni.getStorageSync("token")`,
        },
        success: (res) => {
          let resp = JSON.parse(res.data);
          this.form.voucherPictureUrls.push(resp.data);
        },
      });
    },
    //删除图片
    deleteImgs(index, lists, name) {

    },
  }
</script>

uploadDo(event, type) {

   console.log(event, "event");        //上传图片事件
      uni.uploadFile({
        url: "http://192.168.2.105:18100/file/uploadFile",//仅为示例，非真实的接口地址
        filePath: event.file.path,
        name: "file",
        header: {
          Authorization: `Bearer  +uni.getStorageSync("token")`, //要添加header否则接口不能调用
        },
        success: (res) => {

         console.log(res, "res");

          //如果上传成功打印下res，看有没有调用接口以及图片上传回显
          let resp = JSON.parse(res.data);
          this.form.voucherPictureUrls.push(resp.data);
        },
      });
    },