Vue+element3 Upload利用http-request实现第三方地址图片上传

一、Vue + el-upload

直接上传方法如下：上传图片根据action地址请求后获取到图片url地址

具体方法官网有定义，action为必传项

二、实现第三方地址图片上传

不使用action地址，又由于action为必传项，改为 action=" #"，新增 :http-request

页面：

<el-form :model="form">
  <el-form-item label="图片" v-model="form.imageUrl">
    <el-upload
      action="#"
      list-type="picture-card"
      :http-request="httpRequest"
      :before-upload="beforeAvatarUpload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

方法：

methods: {
    httpRequest(data) {
      console.log("自定义上传", data);
      // 封装FormData对象
      var formData = new FormData();
      formData.append("file", data.file);
      console.log("formData",formData);
      // 调用后端接口
      uploadByServer(formData).then(res => {
        console.log(res);
      }).catch(err=>{})
    },
    beforeAvatarUpload(file) {
      //   console.log("上传前", file);
      const isImg = file.size / 1024 / 1024 < 2;
      if (!isImg) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }

      const isType = file.type === "image/png";
      const isType2 = file.type === "image/jpeg";

      if (!isType && !isType2) {
        this.$message.error("上传头像图片格式为png或jpg");
      }
      return (isType || isType2) && isImg;
    },
  }

结果：

前端代码：ben

<template>
  <div>
    <el-form :model="form">
      <el-form-item label="图片" v-model="form.imageUrl">
        <el-upload
          action="#"
          list-type="picture-card"
          :http-request="httpRequest"
          :before-upload="beforeAvatarUpload"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {uploadByServer} from "@/api/upload";
export default {
  data() {
    return {
      form: {
        imageUrl: ""
      },
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  methods: {
    httpRequest(data) {
      console.log("自定义上传", data);
      var formData = new FormData();
      formData.append("file", data.file);
      console.log("formData",formData);
      uploadByServer(formData).then(res => {
        console.log(res);
      }).catch(err=>{})
    },
    beforeAvatarUpload(file) {
      //   console.log("上传前", file);
      const isImg = file.size / 1024 / 1024 < 2;
      if (!isImg) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }

      const isType = file.type === "image/png";
      const isType2 = file.type === "image/jpeg";

      if (!isType && !isType2) {
        this.$message.error("上传头像图片格式为png或jpg");
      }
      return (isType || isType2) && isImg;
    },
    handleChange(file, fileList) {
      if (fileList.length > 1) {
        fileList.shift();
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    onSubmit() {
      console.log("submit!");
    }
  },
  created() {},
  mounted() {}
};
</script>
  }

本文转载自Vue+element Upload利用http-request实现第三方地址图片上传_el-upload http-request-CSDN博客