ZhiHuiJiaoWu_UniApp/components/AQ/AQUplodeImgMulti.vue

<!--多图上传-->
<template>
  <view>
    <uni-file-picker
        ref="filePicker"
        :limit="maxFileNum"
        :image-styles="imageStyles"
        :value="fileList"
        :sourceType="sourceType"
        fileMediatype="image"
        mode="grid"
        @select="select"
        @success="success"
        @delete="deleteFile"
        @fail="error"
    />
  </view>
</template>

<script>
import {Api_url} from "../../common/config";
//firstui上传组件
  export default {
		name: 'AQUplodeImgMulti',//组件名称
    components: {

    },
		props: {
		  //父组件参数
      //表单名称
      inputName: {
				type: String,
				default: ''
			},
      //最多可以上传的数量
      maxFileNum:{
        type: Number,
        default: 3
      },
      //表单值
      inputValue: {
        type: Array,
        default: []
      },
		},
    computed: {
      initUpload() {
        return {
          inputName: this.inputName,
          inputValue: this.inputValue,
          maxFileNum: this.maxFileNum
        };
      }
    },
    watch: {
      initUpload: {
        handler(newProps) {
          // console.log('AQ初始化监听:', newProps);
          this.formData.inputName = newProps.inputName;
          this.formData.inputValue = newProps.inputValue;
          if (!this.formData.inputValue.length){
            this.fileList = []
            this.filePathArr = []
            this.$nextTick(() => {
              if (this.$refs.filePicker) {
                //清除之前上传的图片
                this.$refs.filePicker.clearFiles();
              }
            });
          }else{
            //图片存在
            this.fileList = []
            this.filePathArr = []
            if (this.formData.inputValue.length > 0){
              this.filePathArr = this.formData.inputValue//已上传文件的相对路径数组
              this.formData.inputValue.forEach((v)=>{
                let _file_url = this.$util.img(v);
                let extname = v.substring(v.lastIndexOf(".") + 1);//后缀名
                this.fileList.push({
                  "name": v, //文件名
                  "extname": extname,//后缀名
                  "url": _file_url,//绝对路径
                })
              })
            }
            console.log('AQ初始化监听:', newProps,this.fileList);
          }
        },
        deep: true,
        immediate: true
      }
    },
    data() {
      return {
        formData: {
          inputName: '',
          inputValue: [],
          maxFileNum: 3,
        },

        //上传接口地址
        uploadApiUrl: `${Api_url}api/upload/memberStore`,

        // 上传图片的样式
        imageStyles: {
          width: 90,
          height: 90,
        },

        // uni.chooseImage值，从相册选择，拍摄
        sourceType: ['album', 'camera'],

        //上传状态，用于保存或其他操作时做判断
        status: '',
        //上传的图片地址列表
        urls: [],//上传的图片地址列表
        fileList: [
          // {
          //   "name":"file.txt",文件名
          //   "extname":"txt",//后缀名
          //   "url":"https://xxxx",//绝对路径
          // },...{...}
        ],//初始化已上传的图片列表
        filePathArr: [],//已上传文件的相对路径
      };
    },
    created(){
		  console.log('Api_url',this.uploadApiUrl)
    },
		methods: {
		  //选择文件时触发
      async select(e){
        console.log('选择文件时触发',e)
        e.tempFilePaths.forEach((v, k) => {
          this.uplodeFile(v,k)
        })
      },

      async uplodeFile(filePath,index){
        await uni.uploadFile({
          url: this.uploadApiUrl, //仅为示例，非真实的接口地址
          filePath: filePath,
          name: 'file',
          // formData: {
          // 	'file': ''
          // },
          success: (uploadFileRes) => {
            let res = JSON.parse(uploadFileRes.data.replace(/\ufeff/g, "") || "{}")
            console.log('上传成功1',res);
            if (res.code >= 0){
              let _arr = {}
              // 下面3个值是uni-app规定的一个不能少
              _arr.url = res.data.pic_url
              _arr.extname = res.data.file_ext
              _arr.name = res.data.pic_name
              this.fileList.push(_arr)
console.log('上传成功2',_arr);
              this.filePathArr.push(res.data.pic_path)
              //上传成功
              this.emitUploadSuccess(this.filePathArr)
            }else{
              //失败
              uni.showToast({
                title: res.message
              })
            }
          },
          fail: (err) => {
            //失败
            uni.showToast({
              title: err.message
            })
          }
        })
      },


      //删除文件时触发
      deleteFile(e){
        console.log('删除文件时触发',e);
        this.filePathArr.splice(e.index,1)
        this.emitUploadSuccess(this.filePathArr)
      },


      /**
       * 组件回调事件,通知父组件上传成功
       * @param file_path 文件相对路径
       * @param file_url 文件绝对路径
       */
      emitUploadSuccess(file_path_arr) {
        console.log('多图上传返回值1',file_path_arr)
        this.$emit('AQUploadSuccess', {
          inputName: this.inputName,
          filePathArr: file_path_arr,
        })
      },

    }
	};
</script>

<style lang="scss">

</style>