通过api接口把图片上传给后端（踩坑）

最新推荐文章于 2024-07-10 17:10:14 发布

会点php的前端小渣渣

最新推荐文章于 2024-07-10 17:10:14 发布

阅读量1.4k

点赞数

分类专栏：前端记录 js

本文链接：https://blog.csdn.net/qq_39523111/article/details/118525737

版权

图片上传 multipart/form-data FormData 文件限制前端开发

关键词由CSDN通过智能技术生成

js 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

前端记录

18 篇文章 0 订阅

订阅专栏

1.加multipart/form-data

//用户端图片上传  加multipart/form-data
export const uploadImage = (params) => {
  return $.post('/app/pat/pushpull/imgUpload', params, { headers: { "Content-Type": "multipart/form-data" } })
}

2.还有最主要用 new FormData 来传。。。。

 async getImageByHost (file, field) {
      console.log(111, file)
      let File = new FormData()
      File.append("file", file)
      File.append("type", "Copy")
      
      const [err, res] = await to(uploadImage(File))
      if (err) return this.$toast(err.errorMsg)
      console.log(2222, res)
      if (!res) {
        this[field] = []
      }
      return res
    }

//上传前通用限制 
function beforeUpload(file: any) {
    // 限制图片 格式、size、分辨率
    const isJPG = file.type === "image/jpeg"
    const isJPEG = file.type === "image/jpeg"
    const isGIF = file.type === "image/gif"
    const isPNG = file.type === "image/png"
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!(isJPG || isJPEG || isPNG)) {
      Modal.error({
        title: "只能上传JPG、JPEG、PNG格式的图片~",
      })
    } else if (!isLt2M) {
      Modal.error({
        title: "图片超过2M限制，不允许上传~",
      })
    }
    return (isJPG || isJPEG || isPNG) && isLt2M

  }