Vue 后台管理系统实现头像上传

采用手动提交服务器的方式

1.  :limit  限制一次上传图片的数量
2. :on-exceed 当超过限制数量时执行的方法
3. :auto-upload="false"  设置手动提交
4. :before-upload 上传前执行的操作  做格式和大小的校验
5. :on-success 上传成功后的操作  回有一个返回值 接收后端返回的图片地址

beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isPNG = file.type === 'image/png';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG && !isPNG) {
					this.$message.error('上传头像图片只能是 JPG或者PNG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return (isJPG || isPNG) && isLt2M;
			},
			handleAvatarSuccess(res, file) {
				// 上传图片成功后返回图片地址
				this.imgUrl = res.data
			},
			handleExceed() {
				this.$message.warning(`当前限制只能选择 1 张图片!`);
			},
			upload(){
				//手动提交
				this.$refs.upload.submit();
			}

 先引入七牛云工具类

/*
 * 开发团队                          :creat
 * 开发团队领导                       :zhangxiaolong
 * 开发人员姓名                       :zhangxiaolong
 * 开发人员学号                       :2019110446
 * 开发时间                          :2021/9/12
 * 文件名称                          :signment.java
 * 开发工具                          :Intellij IDEA
 */
package com.zxl.utils;

import com.alibaba.fastjson.JSON;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.Region;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

@Component
public class QiniuUtils {

    //七牛云的访问地址
    public static  final String url = "http://cdn.zxlsc.top/";

    //获取配置文件中的秘钥
    @Value("${qiniu.accessKey}")
    private  String accessKey;
    @Value("${qiniu.accessSecretKey}")
    private  String accessSecretKey;

    public  boolean upload(MultipartFile file,String fileName){

        //构造一个带指定 Region 对象的配置类
        Configuration cfg = new Configuration(Region.huabei());
        //...其他参数参考类注释
        UploadManager uploadManager = new UploadManager(cfg);
        //...生成上传凭证，然后准备上传
        String bucket = "myblogssr";
        //默认不指定key的情况下，以文件内容的hash值作为文件名
        try {
            byte[] uploadBytes = file.getBytes();
            Auth auth = Auth.create(accessKey, accessSecretKey);
            String upToken = auth.uploadToken(bucket);
            Response response = uploadManager.put(uploadBytes, fileName, upToken);
            //解析上传成功的结果
            DefaultPutRet putRet = JSON.parseObject(response.bodyString(), DefaultPutRet.class);
            return true;
        } catch (Exception ex) {
            ex.printStackTrace();
        }
        return false;
    }
}

Controller

@RestController
@RequestMapping("/avatars/upload")
public class AvatarUploadController {

    @Autowired
    private QiniuUtils qiniuUtils;

    @PostMapping
    public Result upload(MultipartFile file){
        //获取到文件名称 如a.jpg
        String originalFilename = file.getOriginalFilename();
        //唯一的文件名称
        String fileName = "avatar/"+UUID.randomUUID().toString() + "." + StringUtils.substringAfterLast(originalFilename,".");
        //上传文件到哪呢？ 上传到七牛云 将图片发放到离用户最近的服务器上，降低自身服务器的带宽消耗

        boolean upload = qiniuUtils.upload(file, fileName);
        if (upload){
            return Result.success(QiniuUtils.url + fileName);
        }
        return Result.fail(20001,"上传失败");

    }


}