vue结合element-ui组件将图片上传到阿里云oss上

摆烂的憨波个

已于 2024-06-10 13:26:39 修改

阅读量157

点赞数 4

文章标签： vue.js 阿里云前端

于 2024-06-10 13:16:40 首次发布

本文链接：https://blog.csdn.net/m0_68336608/article/details/139575251

版权

前端向后端传递图片地址,后端将图片地址存至数据库内

为什么不让后端将图片存至oss?

后端将图片存至oss中,需要获取存入图片的详细位置,但是由于权限限制,是不允许浏览器拿到要存储的图片本地的具体位置,只能拿到文件名,eg:001.jpg,所以前端向后端传时是不能精确定位图片具体位置的

这时候又有人问了?那我直接把图片(File类型)传过去不就行了,还省了后端new File(图片路径)?但是你传图片通常不可能只传图片,还涉及到信息的更改什么的(string,int,File类型都要涉及到),那后端接收太麻烦了;还有很重要的一点就是,万一在更新用户信息里面,你并没更改图片,直接点击更新,后端接收的就不是file类型的数据,而是图片在oss的地址(是个字符串) 类型就错了 (脑子晕o(╥﹏╥)o)

进入正题

①安装oss

npm install ali-oss

②安装nanoid(可以根据字母数字生成一串随机数,用于赋值给图片名,以保证存储在oss中图片名的不重复<图片名重复后会发生覆盖>)

npm i nanoid

③前端配置oss.js文件

版本一:

//oss.js
const OSS = require('ali-oss');
const nanoid=require("nanoid")
const client = new OSS({
  accessKeyId: 'Id',  // 查看你自己的阿里云KEY
  accessKeySecret: 'password', // 查看自己的阿里云KEYSECRET
  bucket: 'your_bucket', // 你的 OSS bucket 名称
  region: 'oss-cn-beijing', // bucket 所在地址，我的是北京
  endpoint:'oss-cn-beijing.aliyuncs.com',
  secure:true
});
export async function uploadimg(file){
  const uuid=nanoid.nanoid();
  const index=file.name.lastIndexOf('.');
  const hou=file.name.substring(index+1);
  const key=uuid+"."+hou;
  var jieguo='';//用于记录生成的图片地址
   await client.multipartUpload(`sheep/${key}`,file,{//这里我放的位置是oss中的sheep文件内
    process:function(e){
      console.log(e);//这里不知道为啥没执行
    } 
  }).then((result) => {
    jieguo=result.name;//拿到存储至oss的图片名称 但是不全,所以后面拼接(看最后!)  but!这行代码非常奇怪!放在输出下面就显示为空(离谱),所以这行位置不要改变!
    console.log(result);
    return "https://your_bucket.oss-cn-beijing.aliyuncs.com/img/"+result.name;//没执行
  }).catch((err) => {
    console.log(err);
    return "空";
  })
  return "https://your_bucket.oss-cn-beijing.aliyuncs.com/"+jieguo;//最终的返回值在这<前面虽然有多个返回,但不知道为啥没执行到> 注意:your_bucket是你的OSS bucket 名称,我这里为了隐私代替了
}

附:OK!我就说做个记录还是有好处的,我突然想到那个图片名是我自己生成的,脑子抽筋了当时没反应过来以为是靠oss返回给我图片名的下面是改进后的代码 o(╥﹏╥)o

版本二:

const OSS = require('ali-oss');
const nanoid=require("nanoid")
const client = new OSS({
  

  accessKeyId: 'id',  // 查看你自己的阿里云KEY
  accessKeySecret: 'password', // 查看自己的阿里云KEYSECRET
  bucket: 'your_bucket', // 你的 OSS bucket 名称
  region: 'oss-cn-beijing', // bucket 所在地址，我的是北京
  endpoint:'oss-cn-beijing.aliyuncs.com',
  secure:true
});
export async function uploadimg(file){
  const uuid=nanoid.nanoid();
  const index=file.name.lastIndexOf('.');
  const hou=file.name.substring(index+1);
  const key=uuid+"."+hou;
  var jieguo='';
   await client.multipartUpload(`sheep/${key}`,file,{
    process:function(e){
      console.log(e);
      return "hh";
    } 
  })
  return "https://your_bucket.oss-cn-beijing.aliyuncs.com/sheep/"+key;
}

④前端页面

<el-upload
        class="avatar-uploader"
        action=""
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :http-request="httpRequest"//图片上传
        >
    </el-upload>
//此处省略800行
<script>
import {uploadimg} from '../aliyun/oss.js'//引入js文件
export default {
httpRequest(file) { //上传成功
      uploadimg(file.file).then(url=>{
        console.log("图片是:"+url);//获取到图片地址
      }).catch(error=>{
        console.log(error);
      })
    },
}
</script>