前端页面代码：

----要注意的点：form表单的enctype属性要写成图中内容

JS代码：

----这里非常非常非常重要的一点，ajax的type一定要是post，一定要是post，一定要是post

JAVA后端

----这里可以使用MultipartFile直接接收文件信息，也可以使用HttpServletRequest先接收

----使用request接收后，再强转成MultipartHttpServletRequest类型，再获取文件信息使用MultipartFile接收

平时前端上传图片都会要后端中转一下发送给资源服务器再返回路径给前端，这样势必影响效率。

在开发中前端是可以直接上传资源文件到服务器上的，只不过服务器密钥（下文中SecretId，SecretKey）保存在前端不太安全。

解决方法 向后端请求一个key值再拿这个key来请求服务器

文件流形式上传

import axios from 'axios'
import COS from "cos-js-sdk-v5";
import { Message } from 'element-ui'

/*
  @fail:文件流文件
  @folderName:文件夹名称

  上传文件命名 对应nameRule
  /功能模块英文代码/年/月/日/时间戳.格式
  如：/功能模块英文代码/2021/04/21/时间戳.jpg
*/ 
export function requestServer(fail,folderName){
  return new Promise((resolve,reject)=>{
    let date = new Date();
    let nameRule=`${folderName}/${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}/${date.getTime()}.${fail.type.split('/')[1]}` ;//命名规则
    let authorization = COS.getAuthorization({
      SecretId: "", // 可传固定密钥或者临时密钥
      SecretKey: "", // 可传固定密钥或者临时密钥
      Method: "PUT",
      Pathname: nameRule,
      Headers: { "Content-Type": "image/jpeg;image/jpg;image/png;image/gif" },
      Expires: 9000,
    });
    let url =`https://你自己的资源服务器.com/${nameRule}?${authorization}`;
    let FR = new FileReader();
    FR.addEventListener("load", function (e) {
      let buffer = e.target.result;
      axios({
        method: "put",
        headers:{'Content-Type': 'image/jpeg;image/jpg;image/png;image/gif'},
        url: url,
        data: buffer,
      }).then((res) => {
        console.log("成功信息",res)
        resolve(`https://你自己的资源服务器.com/${nameRule}`)
      }).catch((err) => {
        console.log("失败信息",err)
        Message({
          message: "文件上传失败",
          type: 'error'
        })
        reject(err)
      });
    });
    FR.readAsArrayBuffer(fail);
  })
}

base64上传

var nameRule="";//命名规则
var authorization = COS.getAuthorization({
	SecretId: '', // 可传固定密钥或者临时密钥
	SecretKey: '', // 可传固定密钥或者临时密钥
	Method: 'PUT',
	Pathname: nameRule,
	Headers: { 'Content-Type': 'image/jpeg;image/jpg;image/png;image/gif' },
	Expires: 9000,
});
let url = "https://你自己的资源服务器.com/"+nameRule+"?" + authorization;
let a="base64编码"
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = (res) => {
	if (xhr.readyState === 4) {
		if (xhr.status === 200) {
			console.log("成功图片路径为：","https://你自己的资源服务器.com/"+nameRule);
		} else {
			console.log("上传服务器失败");
		}
	}
};
xhr.open('PUT', url);
xhr.setRequestHeader('Content-Type', 'image/jpeg;image/jpg;image/png;image/gif');
xhr.send(base64ToArrayBufferForImage(a)); // 发送内容。
// 图片的base64字符串转为ArrayBuffer对象。
function base64ToArrayBufferForImage(base64Str) {
   const mark = ';base64,';
   const markIdx = base64Str.indexOf(mark);
   if (markIdx != -1) {
     let startIdx = markIdx + mark.length;
     base64Str = base64Str.substring(startIdx, base64Str.length);
   }
   return base64ToArrayBuffer(base64Str);
}
      
// base64字符串转为ArrayBuffer对象。
 function base64ToArrayBuffer(base64Str) {
   const binaryStr = atob(base64Str);
   const buffer = new Uint8Array(binaryStr.length);
   for (let i = 0; i < binaryStr.length; ++i) {
     buffer[i] = binaryStr.charCodeAt(i);
   }
   return buffer;
}

base64实际开发中我没有用到，只原生测试了一下就分享出来了 感兴趣的朋友可以封装一下

1. 后端需挂载图片路径，前端上传图片时直接上传至挂载路径。
2. 添加虚拟路径访问，例如图片都存放在linux服务器的/root/avatar/目录下，访问时想设置avatar代替目录,若web端口为10000，
   则localhost:10000/访问前缀(未设置不填)/avatar/图片名可访问到图片

@Configuration
public class AvatarVirtualConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/avatar/**")//前端url访问的路径，若有访问前缀，在访问时添加即可，这里不需添加。
                .addResourceLocations("file:/root/avatar/");//映射的服务器存放图片目录。
    }
}

3. 完成这两部之后，即可直接通过url访问图片。