vue如何把有效URL地址通过接口file文件重新上传

vue如何把有效URL地址通过接口file文件重新上传

一、封装接口

一般情况下用你原有封装好的即可
如有需要传参数 可通过对象遍历的方式传进formData

//上传文件
export function uploadpic(file) {
  const formData = new FormData()
  formData.append('file', file)
  return request({
    url: `/user/uploadpic`,
    method: 'post',
    data: formData
  })
}

二、使用方法

如果URL的域名跟接口域名不一致，则需要第三步、第四步，如果一致 可省略第三步、第四步
例如：域名是https://www.baidu.com
本地域名是https://www.aaa.com

    try {
    // 使用 fetch 获取图片数据，并将其转换为 Blob
      const URL = '/pic/gift/40LP51902601.png' 
      const response = await fetch()
      console.log('response', response)
      const blob = await response.blob() // 转换为 Blob 类型
      console.log('blob', blob)
      // 创建 File 对象，第二个参数为文件名，第三个参数为选项（如文件类型）
      const file = new File([blob], 'aaaa.jpg', { type: blob.type })
      await uploadpic(file)
    } catch (error) {
      console.error('Error fetching URL:', error)
    }

三、域名不一致，配置vue.config.js

配置vue.config.js的devServer的proxy

module.exports={
//其余略
	devServer: {
	//其余略
		proxy: {
			['/' + process.env.VUE_APP_FileAddress]: {
				target: process.env.VUE_APP_DATA_FILEUPLOAD,
				changeOrigin: true,
				pathRewrite: {
					['^' + process.env.VUE_APP_FileAddress]: process.env.VUE_APP_FileAddress
				}
			}
		}
	}
}

四、配置.env文件

比如**.env.development**
增加这两个配置

VUE_APP_FileAddress = 'pic'  //因为我的URL = '/pic/gift/40LP51902601.png'  匹配pic字段即可
VUE_APP_DATA_THREE = '域名自填'

最后注意一下请求拦截器那里不要做了什么限制 导致参数无法传入即可

如果有用，请给我点赞收藏，我会很开心，谢谢