关于elementui上传头像到阿里云（前后端代码），以及action的坑。

一抓掉一大把

已于 2024-04-12 23:47:53 修改

阅读量366

点赞数 10

文章标签： elementui 前端 javascript vue.js spring

于 2024-04-12 23:36:45 首次发布

本文链接：https://blog.csdn.net/weixin_63128816/article/details/137697942

版权

本文介绍了如何在前端使用ElementUI的Upload组件配合后端Java代码实现图片上传功能，包括前端表单提交、后端UploadingFiles和Alioss类的处理，以及如何将上传成功的阿里云URL存储到数据库和页面显示。

摘要由CSDN通过智能技术生成

思想：

引入elementui的upload上传按钮，把前端上传的图片的名字，返给后端，后端接收后，处理图片名上传到阿里云。

前端：

我这里用action请求后端路径，后面会放出来，on-success是上传成功后的一个钩子，也就是上传成功后会调用successUpload函数。这个函数用来把后端返回的阿里云url赋到表单上，在点击保存就会把图片阿里云的链接保存到数据库。

<el-form-item label="图像">
         <el-upload

         action="http://localhost:8090/files/upload" :on-success="successUpload">

          <el-button size="small" type="primary">点击上传</el-button>

          </el-upload>
</el-form-item>

successUpload(res){

                  this.form.portraitPath = res.data;

            },

回显在页面上：

这里的prop里的portraitPath是数据库的字段名

 <el-table-column prop="portraitPath" label="头像" width="80">
                <template  slot-scope="scope">
 

       //访问数据库数据的网页字段，回显在页面上。
       <img :src="scope.row.portraitPath" style="height: 50px;">

                </template>
  </el-table-column>

后端：

先创建两个java类，UploadingFiles和Alioss

UploadingFiles：

前端请求过来会先进入这里，注意这里参数名file，我之前是用的别的名字，会产生500问题，难受了很长一段时间。具体看链接https://www.cnblogs.com/chengqiang521/p/15710490.html

@RequestMapping("/files")
public class UploadingFiles
{
    @Autowired
    private Alioss alioss;

    @PostMapping("/upload")
    public Result uploadFiles(MultipartFile  file) throws Exception {
        String url =alioss.upload(file); //调用alioss里的upload函数
        return Result.suc(url); //返回url
    }
}

Allioss：

调用Allioss的upload函数

@Component
public class Alioss {
    String endpoint = "这里填阿里云的网址";
    String accessKeyId="这里填公钥";
    String accessKeySecret="这里填私钥";
    String bucketName = "这里填篮子名字";
//以上四个地方可以看阿里云oss里的Java上传文件使用手册


    public String upload(MultipartFile file) throws Exception {
        InputStream inputStream = file.getInputStream(); //获取文件流
        String originaFilename = file.getOriginalFilename(); //获取图片的原始名
        String fileName = UUID.randomUUID().toString()+originaFilename.substring(originaFilename.lastIndexOf('.'));
//因为图片名字如果重复可能会有问题，我们把文件名改一下UUID(随机图片名)+原始图片名的后缀(例如.jpg)


        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId,accessKeySecret);
        ossClient.putObject(bucketName, fileName,inputStream);
        String url = endpoint.split("//")[0] + "//" +bucketName + "." + endpoint.split("//")[1]+"/"+fileName;  //拼接url
        ossClient.shutdown();
        return url;  //返回url
    }
}