前端上传图片到阿里云,OSS,超详细上传图片教程

我这里附上阿里云的使用,以获取alioss.js中所需的数据,阿里云上传图片操作

首先是安装依赖

复制下面代码即可直接安装

npm install ali-oss

安装过程这里就直接跳过了,这个只是基本操作

接着是进行配置

在项目中的src包下的utils包中创建一个alioss.js文件,你也可以跟我一样创建的名字一样,实际上此.js文件可放在任意位置,只不过在导入时的路径会有所不同
在这里插入图片描述

在alioss.js文件中写入以下代码

var OSS = require('ali-oss');
export function client() {
  var client = new OSS({
    region: 'oss-cn-shenzhen',
    accessKeyId: '这里写你自己keyId',
    accessKeySecret: '这里是你自己的key密码',
    bucket: 'tw704216987'
  })  //后端提供数据
  return client
}

图片中的代码与我贴的代码有所差别,主要原因为版本不一致,图片中的版本较低,需要在后面加上.Wrapper,若你是直接安装的依赖,一般情况下不用加,因为会直接下载最新的依赖,加了反而会出错
在这里插入图片描述

使用时,在vue页面进行导入操作

此代码不建议直接复制,要根据自己的情况来,可能alioss.js文件放置的包的位置不同而略微有所改变

import { client } from '../../utils/alioss.js';

在这里插入图片描述

方法代码

我这里的阿里云的图片设置的是公共读,并不需要签名,所以我赋值的时候是直接赋值的,如果你是个人开发者,也可设置为公共读,理论上来说,没有太大的影响。

Upload(file) {
			       var fileName = 'banner' + `${Date.parse(new Date())}`+'.jpg';  //定义唯一的文件名
				  
			 //定义唯一的文件名,打印出来的uid其实就是时间戳
			       client().multipartUpload(fileName, file.file).then(
			 result => {
			 //此处为给自己属性进行赋值,http后面的代码很有可能会和我的不一样,一切与自己阿里云上的数据为准
				 this.contacts.conImg='http://tw704216987.oss-cn-shenzhen.aliyuncs.com/'+fileName;
				 
			    // 大功搞成  
			      //下面是如果对返回结果再进行处理,根据项目需要,下面是我们自己项目所用的,仅供参考
			          this.fileList[0] =
			             { 
			               'name': result.name, 
			                'url': result.url 
			                }
			           uploadBannerPic(this.fileList).then(res => { 
			           //此处为给自己属性进行赋值,http后面的代码很有可能会和我的不一样,一切与自己阿里云上的数据为准
			             //根据需要可能项目还需对自己的数据库进行保存
						 this.contacts.conImg='http://tw704216987.oss-cn-shenzhen.aliyuncs.com/'+this.fileList[0].result.name;
			           })
			  })
			 },
					/**
					 * 图片限制
					 * 图片限制在理论上来说可以不用写,如果想要简单,可以不写
					 * 上传图片切记不要过大,可能会导致上传失败
					 */
			        beforeAvatarUpload (file) {
			            const isJPEG = file.name.split('.')[1] === 'jpeg';
			            const isJPG = file.name.split('.')[1] === 'jpg';
			            const isPNG = file.name.split('.')[1] === 'png';
			            const isLt500K = file.size / 1024 / 500 < 2;
			            if (!isJPG && !isJPEG && !isPNG) {
			                this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
			            }
			            if (!isLt500K) {
			                this.$message.error('单张图片大小不能超过 500KB!');
			            }
						
			            return (isJPEG || isJPG || isPNG) && isLt500K;
			        }
最后是html代码

html代码可以在很多地方找到,我这里是用的elementUI中自带的组件,你也可用自己另找的,这个不同不影响操作
在这里插入图片描述

我这里是没有发效果图的,这个也并不需要什么效果图,效果可以在自己的云服务器上看到,最后,有什么不懂的地方欢迎留言
我创建了一个技术交流微信群
加我微信,拉你进群,备注来意

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐