vue中上传图片到阿里云oss

最新推荐文章于 2024-02-29 20:31:56 发布

sxs7970

最新推荐文章于 2024-02-29 20:31:56 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue oss 上传图片到oss javascript

本文链接：https://blog.csdn.net/sxs7970/article/details/105875174

前端专栏收录该内容

132 篇文章

订阅专栏

本文介绍了一个基于Vue.js的项目中如何利用ali-oss SDK进行文件上传到阿里云OSS的具体实现，包括配置OSS客户端、在Vue组件中触发文件选择并上传、读取文件内容为DataURL以及处理上传成功的响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中安装 npm i ali-oss -S

oos上传文件官网地址

configOss.js

let OSS = require('ali-oss');
export function client()
{
	var client = new OSS({
		region: 'oss-cn-hangzhou',//地域
// 		endpoint:"oss-cn-hangzhou.aliyuncs.com",//访问域名
		accessKeyId: 'xxx',//你自己的key和id
		accessKeySecret: 'xxx',
		bucket: 'xxx',//oss上你的存储空间名称
		secure: true,
	})
	return client;
}

index.vue中引用

<template>
	<input type="file" name="files" @change="onClick_uploadimg($event)" ref="fileImg" accept="image/*">
</template>
<script>
	import {client} from '../configOss.js'
	export default{
		data(){
			return{
			}
		},
		methods:{
			onClick_uploadimg(e){	
				var fileName = 'uploadImg/' + (new Date().getTime() + 1000) + '.png';
				let reader = new FileReader();
				let fileData = e.target.files[0];
				reader.readAsDataURL(fileData);
				client().multipartUpload(fileName, fileData).then((res) => {
					//var imgUrl = res.res.requestUrls[0];//返回的上传图片的地址
					console.log(res,'成功')
					e.target.value = "";//input连续上传同一张图片会失效，每次成功把它置空一下
				}).catch((err) => {
					console.log(err,'失败')
				})
			}
		}
	}
</script>
<style>

</style>