关于iview-upload-实现拖拽、上传图片

花儿开富贵花

已于 2023-03-24 16:25:10 修改

阅读量751

点赞数

于 2020-10-15 16:03:21 首次发布

本文链接：https://blog.csdn.net/weixin_43843679/article/details/109098833

版权

这段代码展示了如何在Vue.js中实现一个模态框，用于图片上传和预览。组件支持拖拽上传，限制文件格式和大小，并在上传成功后显示图片。上传过程中涉及阿里云OSS服务，使用了额外参数如policy、OSSAccessKeyId等。上传成功后触发回调，更新图片URL并传递给父组件。

摘要由CSDN通过智能技术生成

主要实现的样子
在这里插入图片描述

    <Modal
    v-model="isShowModel"
    title="添加图片"
    @on-ok="ok"
    @on-cancel="cancel">
    //当上传图片成功后显示图片
      <div v-show="fileUrl" style="margin-left:-5px;">
        <template>
          <img :src="fileUrl" width="100%" height="300px"/>
          <!-- <Icon type="md-close-circle" class="delete-img" @click.native="handleRemove()" /> -->
          <span @click="handleRemove()">删除图片</span>
        </template>
      </div>
      //如图上的内容-没上传图片时
      <Upload
        type="drag"
        v-show="!fileUrl"
        :format="['jpg', 'jpeg', 'png']"
        :show-upload-list="false"
        :action="uploadUrl"
        :name="fileFieldName"
        :data="extraParams"
        :before-upload="prefixParams"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-format-error="handleFormatError"
        :max-size="5120"
        :on-exceeded-size="handleMaxSize">
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #ff9900"></Icon>
          <p class="tip-content">点击或拖拽文件到这里上传</p>
          <p class="tip-content">支持类型：jpg/png,最大5M</p>
        </div>
      </Upload>
    </Modal>
    
   data() {
    return {
	  isShowModel: false,  //模态框的显示
      uploadUrl: "http://oss-cn-hangzhou.aliyuncs.com",  //上传的地址（接口地址）
      fileFieldName: "file",  //上传文件字段名
      uploadList: {},
      extraParams: {    //上传时附带额外的参数
        key: "",
        policy: "",
        OSSAccessKeyId: "",
        success_action_status: 200,
        callback: "",
        signature: "",
      },
      uidList: {},
      fileUrl:"",   //图片的地址
      // progressing: false,  //显示
      cpFileList:{},  //传给父组件
	}
    }

methods: {
    ok() {
      this.$emit("img-success", this.cpFileList);  //将上传图片成功的一些字段给父组件
      this.closeModal();
    },

    cancel() {
      this.closeModal();
    },

    closeModal() {
      this.uploadList = {};
      this.fileUrl = "";
      this.cpFileList = {};
      this.isShowModel = false;
      this.$emit("update:isShowImgModel",this.isShowModel)
    },

    handleRemove() {
      this.uploadList = {};
      this.fileUrl = "";
      this.cpFileList = {};
    },

    prefixParams(file) {
      console.log(file)
      let fileNameArray = file.name.split(".");
      let fileType = fileNameArray[fileNameArray.length - 1];
      let fileName = file.name.slice(0, -fileType.length - 1);
      //图片上传成功后，调用成功后的接口，拿到一个网图路径
      return getOssApi()
              .then(res => {
                  let data = JSON.parse(res.data);
                  let randomNum = randomize("Aa0", 15);
                  this.extraParams.policy = data.policy;
                  this.extraParams.OSSAccessKeyId = data.accessid;
                  this.extraParams.signature = data.signature;
                  this.extraParams.key = `${data.dir}${randomNum}.${fileType}`;
                  this.uploadUrl = data.host;
                  this.uidList[file.name] = {
                  fileurl: `${data.host}/${this.extraParams.key}`,
                  filetype: fileType,
                  suffix: fileType,
                  filename: fileName,
                };
              })
              .catch(error => {
                console.error(error);
              })
    },

    handleSuccess(event, file, fileList) {
      this.uploadList = fileList[fileList.length - 1];
      this.cpFileList = this.uidList[`${this.uploadList.name}`];
      this.fileUrl = this.cpFileList.fileurl;
    },

    handleError(event, file, fileList) {
      delete this.uidList[`${file.name}`];
    },

    handleFormatError(file, fileList) {
      //文件格式不对
      this.$Message.warning(this.$t("common.upload_filetype_error_tip"));
      delete this.uidList[`${file.name}`];
    },

    handleMaxSize(file) {
      this.$Message.warning(this.$t("common.select_img"));
      delete this.uidList[`${file.name}`];
    },
  },