el-upload使用http-request实现图片上传，回显，放大效果_el-upload http-request

        在项目开发中，为了实现上传文件的功能，我们需要用到el-upload这个组件，为了实现回显放大效果，就要用到el-image这个组件了。官方文档中介绍了上传的两种方法，一个是使用action，其参数必须要上传的地址；另一个是http-request，该方法覆盖默认的上传行为，可以自定义上传的实现。下面阐述如何实现图片上传，回显，放大效果。

官方文档：Element - The world's most popular Vue UI framework

el-upload组件相关api介绍：

上传图片有以下这些几种方式，开发者可以根据项目实际情况进行选择。

• 传入自定义的上传按钮类型和文字提示

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
</script>

• 照片墙，可以回显图片

代码如下：

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>

• 可以对图片进行拖拽

代码如下：

<el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

 通过以上介绍我们已经初步了解了el-upload的用法，下面我们来看图片上传回显放大的实现过程。代码如下：

<el-upload
      ref="upload"
      class="upload-demo"
      action="#"
      :on-remove="remove"
      list-type="picture"
      :http-request="handler"
      :limit="limit"
      :accept="'.png,.jpg,.jpeg'"
      :on-exceed="onExceed"
      :before-upload="beforeAvatarUpload"
      :file-list="fileList"
    >
      <el-button size="small" type="primary" icon="el-icon-upload"
        >上传图片</el-button
      >
      <div slot="file" slot-scope="{ file }">
        <div style="display: flex; align-items: center">
          <el-image
            style="width: 78px; height: 78px"
            :src="file.url"
            :preview-src-list="[file.url]"
          ></el-image>
          <div style="font-size: 15px; font-weight: bold; margin-left: 32px">
            <el-tooltip :content="file.name" :disabled="isShow" placement="top">
              <div @mouseover="inputOnMouseOver(file.name)">
                {{
                  file.name.length > 10
                    ? file.name.slice(0, 10) + "..."
                    : file.name
                }}
              </div></el-tooltip
            >
          </div>
          <div style="margin-left: 32px">
            <i
              class="el-icon-close"
              @click="remove"
              style="display: inline-block; font-size: 18px"
            ></i>
          </div>
        </div>
      </div>
    </el-upload>

methods: {
      //fileList存放上传的图片 file是对象
      handler(file) {
        this.fileList = [file];
      },
      // 校验上传的文件数量是否超出限制
      onExceed() {
        this.$message.error(`只能上传${this.limit}张图片！`);
      },
      // 移除图片时清空
      remove(file) {
        this.$refs.upload.clearFiles();
      },
      // 上传前校验图片格式
      beforeAvatarUpload(file) {
        const isType = ["image/jpg", "image/png", "image/jpeg"].includes(
          file.type
        );
        if (!isType) {
          this.$message({
            message: "只能上传格式为PNG,JPG,JPEG的图片！",
            type: "warning",
          });
        }
        return isType;
      },
      // 图片名字过长处理
      inputOnMouseOver(name) {
        if (name.length < 10) {
          this.isShow = true;
        } else {
          this.isShow = false;
        }
      },
    },

效果如下，点击图片可以实现放大效果：