使用axios或ajax图片上传

最新推荐文章于 2024-03-12 23:25:21 发布

new-view-hairui

最新推荐文章于 2024-03-12 23:25:21 发布

阅读量2.6k

点赞数 3

分类专栏： axios 文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_45208029/article/details/125198456

版权

axios 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.使用axios上传图片

upload(e) {
      const file = e.target.files[0];
      const formData = new FormData();
      formData.append("file", file);
      // axios.defaults.withCredentials = true;
      axios({
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
        url: "/api/customer_service/upload_img",
        data: formData,
      })
        .then(function (response) {
          if (response.data.code == "200") {
            console.log(response);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

2.使用ajax上传图片

beforeRead(file) { //这里的file就是e.target.file[0],只不过vant自动解析了
        if (this.imgArray.length === this.maxCount) {
          Toast(`最多上传${this.maxCount}张图片`)
          return false
        }
        let vm = this
        let formData = new FormData();
        formData.append('file', file);
        $.ajax({
          url: api.UPLOAD,
          type: 'POST',
          cache: false, //上传文件不需要缓存
          data: formData,
          processData: false, // 告诉jQuery不要去处理发送的数据
          contentType: false, // 告诉jQuery不要去设置Content-Type请求头
          success: function (res) {
            if (res.retCode === "1000") {
              Toast('上传图片成功')
              vm.$emit('uploadPic', res.data)
            } else {
              Toast(res.retMsg)
            }
          },
          error: function (data) {
            Toast('上传失败')
            console.log(data)
          }
        })
        return true
      },