vue+Springboot上传oss阿里云并回显到前端页面

Posted 2022-11-27 未来.....

vue+Springboot上传图片到oss并回显

最近需要用到文件上传了，找了好多博客，最后总结了一下，记录一下操作。

1、前端代码

<!--文件上传弹出框-->
<el-button type="primary" round @click="uploadvisible=true">添加文件</el-button>
<!-- 表格显示图片 -->
    <template>
       <img :src="imgUrl" width="100px" height="100px"/>
    </template>
<el-dialog
   :visible.sync="uploadvisible"
>
   <el-form>
      <el-form-item label="文件" prop="file">
          <el-input v-model="fileName" :disabled="true"></el-input>
            <br>
              <el-upload class="upload-demo"
                         ref=""
                         action=""
                         :limit="1"
                         :before-upload="beforeUpload">
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传.jpg或者.png格式，且不超过5MB</div>
              </el-upload>
                <el-button @click="uploadvisible = false">取消</el-button>
                <el-button type="primary" @click="submitUpload">确定</el-button>
     	</el-form-item>
     </el-form>
</el-dialog>

1、2 js代码

 data() 
   return 
   //文件名
    fileName: "",
	//上传弹出框的提示
	uploadvisible: false,
	//图片url
    imgUrl: "",
	
,
methods: 
//文件上传
            //要在data中定义fileName和visible
            //检查文件格式大小等
            //上传文件校验
            beforeUpload(file) 
                console.log(file, '文件');
                this.files = file;
                //只允许上传文件的格式
                const extension = file.name.split('.')[1] === 'jpg'
                const extension2 = file.name.split('.')[1] === 'png'
                const isLt2M = file.size / 1024 / 1024 < 5
                if (!extension && !extension2) 
                    this.$message.warning('只能是 .jps、.png格式!')
                    return
                
                if (!isLt2M) 
                    this.$message.warning('大小不能超过 5MB!')
                    return
                
                this.fileName = file.name;
                return false // 返回false不会自动上传
            
            ,
            //提交上传
            submitUpload() 
                var that = this;
                console.log('上传' + this.files.name)
                if (this.fileName == "") 
                    this.$message.warning('请选择要上传的文件！')
                    return false
                
                let fileFormData = new FormData();
                fileFormData.append('file', this.files, this.fileName);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
                let requestConfig = 
                    headers: 
                        //消息头
                        'Content-Type': 'multipart/form-data'
                    ,
                
                this.$http.post(`/back/car/uploadAvator`, fileFormData, requestConfig).then(response => 
                    //console.log(response.data.result);
                    that.$message.success(response.data.msg)
                    that.imgUrl = response.data.result;
                    //console.log(that.imgUrl)
                    //关闭弹框
                    that.uploadvisible = false;
                )
            ,

2、 后端代码

• 导入依赖

<!--阿里云oss依赖-->
        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.10.2</version>
        </dependency>

2、1 controller层

@RestController
@RequestMapping("/back/check")
@Api(tags="上传文件")
@CrossOrigin
public class CheckController 
	@Resource
    private OssService ossService;
    /**
     * 上传头像到阿里云的oss
     * CommonResult 这是工具类，没有可以使用map替代
     */
    @PostMapping("uploadAvator")
    public CommonResult uploadOssFile(@RequestParam("file") MultipartFile file) 
        System.out.println("file::"+file);
        String url = ossService.uploadFileAvatar(file);
        System.out.println("url::"+url);
        return new CommonResult(2000,"文件上传成功",url);
    

2、2 service层

import org.springframework.web.multipart.MultipartFile;
public interface OssService 
    String uploadFileAvatar(MultipartFile file);

2、3impl层

package com.carrent.back.service.impl;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.carrent.back.service.OssService;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.util.UUID;

@Service
public class OssServiceImpl implements OssService 

    @Override
    public String uploadFileAvatar(MultipartFile file) 
        //上传的操作
        //将文件的名字编程唯一的再上传
        int i = file.getOriginalFilename().lastIndexOf(".");//获取上传的文件的原名
        String suffix = file.getOriginalFilename().substring(i);
        //System.out.println("fileanme文件原名："+suffix);
        //借助  UUID 将文件名编程唯一的 重新定义
        String uuid = UUID.randomUUID().toString();
        //定义上传oss的文件路径
        String datePath = "vue";
        String filename = datePath + "/" + uuid + suffix;

        // Endpoint以杭州为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-beijing.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
        String accessKeyId = "xxxx";
        String accessKeySecret = "xxxx";
        String bucketName = "你的仓库名称";
// <yourObjectName>上传文件到OSS时需要指定包含文件后缀在内的完整路径，例如abc/efg/123.jpg。
        String objectName = filename;

// 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
// 上传文件到指定的存储空间（bucketName）并将其保存为指定的文件名称（objectName）。
        try 
            //file.getInputStream() 当前文件的输入流
            ossClient.putObject(bucketName, objectName, file.getInputStream());
         catch (IOException e) 
            e.printStackTrace();
        
// 关闭OSSClient。
        ossClient.shutdown();
        //https://tutu-image.oss-cn-beijing.aliyuncs.com/19c55f39-a82a-427c-9e81-25081271de06.jpg
        String url = "https://" + bucketName + "." + endpoint + "/" + filename;

        return url;