vue element-ui 上传图片到oss阿里云(第三方服务)

Posted 2023-04-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue element-ui 上传图片到oss阿里云(第三方服务)相关的知识，希望对你有一定的参考价值。

参考技术A 一、阿里云设置：

8.1 进入 OSS 管理控制台界面。

8.2 在左侧存储空间列表中，单击目标存储空间名称，打开该存储空间概览页面。

8.3 单击基础设置页签，找到跨域设置区域，然后单击设置。

8.4 单击创建规则，打开设定跨域规则对话框。

8.5 设置跨域规则。

8.6 单击确定。
说明：您也可以对已有的规则进行编辑和删除操作。

截止到这里，阿里云创建Bucket、角色、授权、跨域等前期准备工作就全部完成了。

二、安装使用：

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

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(function (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;
    }
}