antd 的upload组件结合oss实现图片上传

多张图片列表上传

---

1、视图

      <div style="display:flex;" class="clearfix">
        <span>添加图片：</span>
        <a-upload
          list-type="picture-card"
          :file-list="fileList"
          @preview="handlePreview"
          @change="handleChangeImg"
          :before-upload="beforeUpload"
        >
          <div v-if="fileList.length < 3" style="display:flex">
            <div class="ant-upload-text" style="width:100px">
              <a-icon :type="loading ? 'loading' : 'plus'"/>
              <p style="width:100px">上传图片</p>
            </div>
          </div>
        </a-upload>
      </div>
      <a-modal :visible="previewVisible" @cancel="handleCancel">
        <img style="width: 100%" :src="previewImage">
      </a-modal>

2、js逻辑

//data定义数据
  image: [],
      fileList: [],
      uploading: false,
      previewVisible: false,
      previewImage: '' //预览图片地址
//js引入
    import uploadOSS from './../tool/alioss'


async beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('请上传JPEG/PNG格式!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图像必须小于2MB!')
      }
      try {
        let res = await uploadOSS(file).then(
          result => {
            this.image.push({ uid: file.uid, name: result.fileName, status: 'done', url: result.fileUrl })
            this.$message.success('添加图片成功！')
          },
          err => {
            this.$notification.error({
              message: `添加图片失败`,
              description: `园区添加图片失败，请稍后再试。错误信息：\n${err.toString()}`
            })
          }
        )
      } catch (e) {
        console.log(e)
      }
    },
    handleChangeImg({ fileList }) {
      this.fileList = fileList
      this.fileList.forEach(item => {
        item.status = 'done'
      })
      let arr = []
      for (let i = 0; i < this.fileList.length; i++) {
        for (let j = 0; j < this.image.length; j++) {
          if (this.fileList[i].uid == this.image[j].uid) {
            arr.push(this.image[j])
          }
        }
      }
      this.image = arr
    },
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()

        reader.readAsDataURL(file)

        reader.onload = () => resolve(reader.result)

        reader.onerror = error => reject(error)
      })
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleCancel() {
      this.previewVisible = false
    },

3、数据交互

//编辑数据回显 
this.fileList = JSON.parse(record.image)
        this.image = this.fileList
//添加数据清空
 this.fileList = []
        this.image = []
//后端数据传参
 params = {
          name: this.name,
          desc: this.desc,
          image: JSON.stringify(this.image)
        }

4、图片列表样式

.drawer {
  div {
    span {
      display: inline-block;
      width: 120px;
      text-align: right;
    }

    p {
      width: 230px;
      display: inline-block;
    }

    /deep/ .ant-upload-list {
      display: flex;
      z-index: '999';
    }

    .ant-upload-picture-card-wrapper {
      display: flex;
    }
  }
}

使用组件上传图片后，利用oss获取一个图片的线上地址，在把这个图片地址的数组列表存入后端，以便后期回显查看

---

<template>

<div class="clearfix">

<a-upload

action="https://www.mocky.io/v2/5cc8019d300000980a055e76"

list-type="picture-card"

:file-list="fileList"

@preview="handlePreview"

@change="handleChange"

>

<!-- 上传3个 -->

<div v-if="fileList.length < 3">

<a-icon type="plus" />

<div class="ant-upload-text">拖拽或上传原图片</div>

</div>

</a-upload>

<a-modal

:visible="previewVisible"

:footer="null"

@cancel="handleCancel"

>

<img alt="example" style="width: 100%" :src="previewImage" />

</a-modal>

</div>

</template>



<script>



export default {

data() {

return {

previewVisible: false, //是否预览

previewImage: "", //预览图片地址

fileList: [], //上传文件列表

};

},

methods: {

//取消预览

handleCancel() {

this.previewVisible = false;

},

// 预览

async handlePreview(file) {

if (!file.url && !file.preview) {

file.preview = await this.getBase64(file.originFileObj);

}

this.previewImage = file.url || file.preview;

this.previewVisible = true;

},

// 上传文件改变

handleChange({ fileList }) {

this.fileList = fileList;

},

//base64预览

getBase64(file) {

return new Promise((resolve, reject) => {

const reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = () => resolve(reader.result);

reader.onerror = (error) => reject(error);

});

}

},

};

</script>