vue项目中的图片上传

说明：

• 该操作会使用到 ( axios二次封装 ) 中的内容，需要引入
• 框架为vant

代码及注释：

• 图片上传代码

<script>
import { Toast } from "vant";
import { ApiModel } from "../../assets/js/request/api";
const apimodel = new ApiModel();
export default {
  data() {
    return {
      orderId: null,
      fileList: [],
      file: "",
    };
  },
  methods: {
  //第一步：上传图片获取后端返回的图片地址
    afterRead(file) {
      file.status = "uploading";//上传状态
      file.message = "上传中...";
      
      const fd = new FormData();//构造一个FormData()对象
      fd.append("file", file.file);//存入file
      fd.append("type", "shop");//存入type
      apimodel.images(fd).then((res) => {//连接接口
        this.file = res.data.url;
        console.log(this.file);
        if (this.file !== "") {
          file.status = "done";
          Toast.success("上传成功！");
        }
      });
    },
    //第二步：当图片叉掉时，清空file中的内容
    deleted() {
      this.file = "";
      console.log(this.file, "13s");
    },
    //第三步：点击确认按钮时将file中的图片地址上传
    submit() {
      if (this.file == "") {
        Toast.fail("请上传图片！");
      } else {
        let data = {
          order_id: this.orderId,
          img: this.file,
        };
        apimodel
          .submitResult(data)
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.log(err.data.message);
            Toast.fail(err.data.message);
          });
      }
    },
  },
};
</script>

• api.js

// 图片上传
    images(file) {
        return this.uploader({
            url: '/api/images',
            method: 'POST',
            file,
        })
    }