element-ui upload上传用户头像注意事项

这是前端的代码，使用了element-ui的upload组件来上传用户头像：

<el-form-item label="图像" >
                  <el-upload class="avatar-uploader" action="/api/upload" name="image" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
</el-form-item>

这里面action是要提交到后端的链接，这里要注意一点就是要对组件命名，name="image"，然后

1.本地存储后端代码：

后端使用接受的代码如下：

@PostMapping("/upload")
    public Result upload(@RequestParam("image") MultipartFile image) throws IOException {
        //获取文件原始名
        String originalFilename = image.getOriginalFilename();
        //构造唯一的文件名（uuid）
        int index = originalFilename.lastIndexOf(".");
        String extname = originalFilename.substring(index);
        String newFileName = UUID.randomUUID().toString() + extname;

        //将文件存储在服务器的磁盘目录中 E:\Desktop\wenj\Java\web_heima\talis\tlias-web-managerment\src\main\resources\static\images
        image.transferTo(new File("E:\\Desktop\\wenj\\Java\\web_heima\\talis\\tlias-web-managerment\\src\\main\\resources\\static\\images\\"+newFileName));
        return Result.success();
    }

后端使用@RequestParam的注解来对应前端的name="image"，这样就可以把文件存储在对应的磁盘目录里。

2.上传阿里云OSS存储代码：

/**
 * 阿里云 OSS 工具类
 */
@Component
public class AliOSSUtils {

    private String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
    private String accessKeyId = "xxxxxxx";
    private String accessKeySecret = "xxxxxxx";
    private String bucketName = "xxxxxxx";

    /**
     * 实现上传图片到OSS
     */
    public String upload(MultipartFile file) throws IOException {
        // 获取上传的文件的输入流
        InputStream inputStream = file.getInputStream();

        // 避免文件覆盖
        String originalFilename = file.getOriginalFilename();
        String fileName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));

        //上传文件到 OSS
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        ossClient.putObject(bucketName, fileName, inputStream);

        //文件访问路径
        String url = endpoint.split("//")[0] + "//" + bucketName + "." + endpoint.split("//")[1] + "/" + fileName;
        // 关闭ossClient
        ossClient.shutdown();
        return url;// 把上传到oss的路径返回
    }

}

这是一个阿里云上传文件的工具类，实现了传入一个MultipartFile的类，并实现上传，并返回一个前端可以访问到图片的路径，后端接收：

@Autowired
    private AliOSSUtils aliOSSUtils;
@PostMapping("/upload")
    public Result upload(@RequestParam("image") MultipartFile image) throws IOException {
        //调用阿里云OSS工具类进行文件上传
        String url = aliOSSUtils.upload(image);
        //获取文件返回的路径共前端使用
        return Result.success(url);
    }

这里把url封装到一个对象中返回到前端，然后只要把前端对应的对象的image的进行赋值即可，前端头像展示：

<el-table-column prop="image" label="图像" width="150" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.image" width="100px">
              </template>
</el-table-column>