去掉img自带边框，前端文件下载，图片转base64发送后端

1. 去掉img的自带边框，当src为空的时候不显示图片的默认边框：

img[src=''] {
   opacity: 0;
}

2. 文件下载：

export async function downLoadFile1(paramList, url) {
    let downloadParams = {
      data: JSON.stringify(paramList),
    }
    await axios({
      method: 'post',
      url: config.rootPath + url,
      data: qs.stringify(downloadParams),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded', //将表单数据传递转化为form-data类型
        // 'Content-Type': 'application/json', 
      },
      withCredentials: true,
      responseType: 'blob',
    //   headers:{ 'Content-Type': 'application/json; application/octet-stream'},
    })
      .then((response) => {
        console.log(response)
        const { headers, data } = response
        // let fileName = headers['content-type']
        //   ?.split('filename=')[1]
        //   .split(';')[0]
        // console.log('ll',headers['content-type'].split('filename=')[1])
        // let fileName = headers['content-type'].split(';')[0]
        let fileName = 'file'
          
        const fileData = new Blob([data], { type: 'application/zip' })
        let file = window.URL.createObjectURL(fileData)
        let aHref = document.createElement('a')
        aHref.href = file
        aHref.download = decodeURIComponent(fileName)
        // aHref.download = 'uwenjain'
        aHref.click()
        window.URL.revokeObjectURL(file)
        console.log('scc1')
        // state.dialogState.open = false
        return false
      })
      .catch(() => {
        // state.dialogState.open = false
        console.log('error出错啦~文件不存在')
        // notice('error', '出错啦~', '文件不存在')
      })
      .finally(() => {
        return false
      })
  }

3. 图片转base64:

封装promise对象：

//封装转化为base64的方法
    const changeBASE64 = file =>{
      return new Promise(resolve => {
        let fileReader = new FileReader()
        fileReader.readAsDataURL(file)
        fileReader.onload = ev =>{
          resolve(ev.target.result)
       }
      })
     }
 

调用并使用：

const beforeAvatarUpload = async (rawFile) => {
      let Base64
      Base64 = await changeBASE64(rawFile)
      console.log('baseliuyu',Base64)
      if (rawFile.type !== 'image/png' && rawFile.type !== 'image/jpeg') {
        ElMessage.error('请上传正确的图片格式!')
        return false
      } else if (rawFile.size >200000) {
        ElMessage.error('头像图片大小不能超过200KB！')
        return false
      }
      return true
}

formdata格式：

const form = new FormData();
form.append("file", rawFile);
 
cmsInstance.post(config.rootPath + "/sys/sysTempFile/uploadFile", form, {
headers: {
   "Content-Type": "multipart/form-data",
  },
})
 
//cmsInstance是axios的实例
 
import axios from 'axios'
 
export var cmsInstance = axios.create({
    baseURL: config.root, // 接口统一域名
    withCredentials: true, // 携带Cookie
    timeout: 60 * 1000, //设置超时
})