vue实现文件和图片上传到OSS；uniapp实现文件和图片上传到OSS

原创已于 2022-09-03 17:07:03 修改 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #uni-app #前端

于 2022-09-03 16:17:22 首次发布

本文介绍了如何在Vue和UniApp应用中集成阿里云OSS进行图片上传。对于Vue，详细展示了从注册阿里云账号、安装ali-oss库到实现图片上传的步骤；对于UniApp，讲解了安装插件、配置config.js以及调用uni.chooseImage选择图片并上传的过程。注意，可能出现的跨域问题需要在OSS设置中解决。

一、vue：

1、首先注册阿里云账号，阿里云官网

2、安装

npm install ali-oss -D

3、在页面中使用

<template>
  <div>
    <el-upload
      class="upload-demo"
      action=""
      :on-change="handleChange"
      :auto-upload="false"
      :limit="1">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
import OSS from 'ali-oss'
export default {
  components:{},
  data() {
    return {
      
    }
  },
  mounted() {
    
  },
  methods:{
    handleChange(file, fileList) {
      this.upLoadImg(fileList[0].raw)
    },
    upLoadImg(files) {
      // 实例化OSS
      const client = new OSS({
        region:'oss-cn-hangzhou',  // 地域  //oss-cn-hangzhou 就是地域
        accessKeyId: 'LTAIXXXxxXX', // id
        accessKeySecret: 'kfG8xxxxxxxxx', // 秘钥
        bucket: 'abcdefggdd'  // OSS存储区域名   例如：https://abcdefggdd.oss-cn-hangzhou.aliyuncs.com   // abcdefggdd 就是存储区域名
      });
      client.multipartUpload(files.name, files).then(result => {
        let url = result.res.requestUrls
        url = url[0].split("?")
        console.log(url[0])  // 接口返回的图片路径，上传、使用都可以
      }).catch(function (err) {
          console.log(err);
      });
    }
  }
}
</script>

二、uniapp：

1、安装插件→无需后台签名

2、配置config.js

3、将crypto.js中的第106行代码注释掉，否则安卓端插件会不可用。

4、页面中使用

<template>
	<view class="main" style="padding-top: 30rpx;">
		<view class="whole">
			<view class="flexW aLine color333">
				<text>修改头像</text>
				<view style="position: relative;">
					<image @click="avatar()" :src="details.headimage" style="width: 126rpx;height: 126rpx;border-radius: 50%;"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uploadImage from "../../js_sdk/yushijie-ossutil/ossutil/uploadFile.js"
	export default {
		data() {
			return {
				details:'',
				fileInfo:''
			}
		},
		onLoad() {

		},
		methods: {
			avatar() {
				let that = this
				uni.chooseImage({
				  count: 1,
				  success: res => {
				    var tempFilePaths = res.tempFilePaths;
				    uploadImage(res.tempFilePaths[0], 'images/', 
				    result => {
							that.details.headimage = result
                            // result 接口返回的路径，可直接使用
				    },err =>{ 
				      console.log(err);
				    })
				  }
				})
			},
		}
	}
</script>

<style lang="scss">
	.whole {
		background: #fff;
		margin: 0 30rpx;
		border-radius: 20rpx;
		font-size: 30rpx;
	}
</style>