picture-card图片上传

最新推荐文章于 2023-02-28 15:34:09 发布

Zxf_xcn

最新推荐文章于 2023-02-28 15:34:09 发布

阅读量246

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/Zxf_xcn/article/details/120863307

版权


<template>
  <div class="dialog-module">
        <el-upload
          :action="upload.url"
          list-type="picture-card"
          :headers="upload.headers"
          :class="{ hide: hideUpload }"
          :file-list="fileList"
          :limit="1"
          :auto-upload="true"
          :on-change="handleChange"
          :on-preview="handlePictureCardPreview"
          :disabled="isDetail"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
        >
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  name: "DialogModule",
  data() {
    return {
         // 用户导入参数
      upload: {
        open: false,
        title: "",
        isUploading: false,
        updateSupport: 0,
        headers: { Authorization: "Bearer " + getToken() },
        url: process.env.VUE_APP_BASE_API + "/manager/tool/file/upload",
      },
      ///文件上传
      dialogImageUrl: "",
      dialogVisible: false,
      
      // hideUpload: false, // 控制选择框是否显示的开关
      fileList: [],
    };
  },
   computed: {
    hideUpload() {
      return this.form.logoUrl;
    },
  },
  methods: {
       handleSuccess(file, fileList) {
      console.log("success", file, fileList);
      this.form.logoUrl = file.data.fileUrl;
      // this.form.logoUrl.push(file.data.fileUrl);
    },
    handleChange(file, fileList) {
      console.log("change", fileList);
      // this.hideUpload = this.form.logoUrl.length > 0;
    },
    handleRemove(file, fileList) {
      console.log("remove", fileList);
      // 防止出场动画未结束，选择框提前出现
      setTimeout(() => {
        this.form.logoUrl = "";
        // this.hideUpload = this.form.logoUrl.length > 0;
      }, 1000);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
 

<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>