阿里云OSS上传图片实现流程

前置，在阿里云开通OSS对象储存。然后在下图文件管理配置文件储存目录和图中传输管理配置访问域名。

1.复制 uploadFileUtil 文件夹和 uploadFile.js 文件在 util 文件夹

2.在使用的页面引入 uploadFile

效果图：

实现代码

<template><view class="quiz"><view class="title">请选择你要提问的领域</view><picker @change="bindPickerChange" :range="arr"><view class="xuanzhe"><img @click="" class="rrr" src="@/static/image/rrr.png" />{{faq_val||arr[0]}}</view></picker><view class="title title2">请输入您想要提问的问题</view><textarea class="textarea1" v-model="title" placeholder-style="color:#d0d0d0" placeholder="请输入问题的标题" /><textarea class="textarea2" v-model="introduce" placeholder-style="color:#d0d0d0" placeholder="请输入问题的具体描述" /><view class="title title3">请拍照或上传图片帮我们更好的解答问题</view><!-- 添加图片 --><view class="mainAddpic"><p class="addPic"><span>添加图片</span><span>（可添加1-5张图片）</span></p><view class="ThreePic"><block v-for="item in uploadimageArr" :key=""><view class="picMore"><image v-if="item" :src="delet" mode="widthFix" class="delete" @click="detete(0)" /><image v-if="item" :src="item" class="add1" /><image class="addPic1" v-else :src="add" @click="addPic" /></view></block><img class="picMore" v-if="uploadimageArr.length<5" @click="addPic()" :src="quiz_upImg" /></view></view><view class="btn" @click="btn()">我要提问</view></view>
</template><script>import uploadImage from "@/util/uploadFile";// 请求话题接口 拿到提问领域，然后请求用户发帖 userSendForum  上传图片用上海的ossimport Search from '@/components/search.vue';var that;export default {components: {Search},data() {return {delet: this.$config.nhsImagesUrl + "apply/applyClosed.png",add: this.$config.ibugooImageUrl + "addImg.png",quiz_upImg: this.$config.dadaImagesUrl + 'quiz_upImg.png',type: 'FeedBack',lists: [],arr: [],faq_val: '',title: '1',introduce: '2',files: [],uploadimageArr: [],cdnImages: [],};},onLoad() {that = this;this.$common.Init.call(this);this.topicLists();},methods: {// 添加图片addPic(e) {const length = this.uploadimageArr.length;if (length >= 5) return;uni.chooseImage({count: 5 - length,sizeType: ["original", "compressed"],sourceType: ["album", "camera"],success: function(res) {var tempFilePaths = res.tempFilePaths;that.uploadimageArr = [...that.uploadimageArr, ...res.tempFilePaths];},});},// 删除选中图片detete(e) {this.uploadimageArr = this.uploadimageArr.filter((item, index) => {return index != e;});},btn() {let cdnImages = new Array(that.uploadimageArr.length);cdnImages = cdnImages.fill("").map((value, index) => {return new Promise((resolve, reject) => {uploadImage.uploadFile(that.uploadimageArr[index],`dadaDepot/${new Date().getTime() + Math.floor(Math.random() * 150)}`,function(resl) {console.log("======上传成功图片地址为：", resl,'网络路径')resolve(resl);uni.hideLoading()},function() {uni.hideLoading()})})})Promise.all(cdnImages).then((res) => {console.log('上传成功',res)}).catch((err) => {that.showSignFlag = false;});},topicLists() {var data = {type: this.type}this.$request(this.$api.community.topicLists, data).then((res) => {this.lists = res.data.lists || [];this.arr = this.lists.map(item => item.title)});},bindPickerChange(e) {this.faq_val = this.arr[e.detail.value];console.log(this.faq_val)},quxiao(item, index, type) {this.setCollection(item, index, type);setTimeout(() => {this.userCollectList();}, 1000)}}};
</script><style lang="scss" scoped>.quiz {margin: 36rpx;position: relative;color: #102841;.mainAddpic {width: 100%;padding: 40rpx 28rpx 50rpx;border-radius: 20rpx;margin-bottom: 20rpx;box-sizing: border-box;.ThreePic {display: flex;// justify-introduce: space-around;flex-wrap:wrap}.addPic {width: 100%;padding-left: 10rpx;padding-bottom: 10rpx;border-bottom: 1px solid #E5F1FF;span:nth-child(1) {font-family: PingFangSC-Medium, PingFang SC;font-size: 28rpx;color: grey;font-weight: bold;}span:nth-child(2) {font-size: 24rpx;color: #999;}}.picMore {width: 190rpx;height: 190rpx;border-radius: 8rpx;display: flex;margin: 30rpx auto 10rpx;position: relative;// border: 1px dashed #ccc;image {width: 88rpx;height: 88rpx;margin: 0 auto;}.add1 {width: 186rpx;height: 186rpx;border-radius: 8rpx;}.delete {position: absolute;right: 0;top: 0;z-index: 2;width: 40rpx;}.addPic1 {width: 60rpx;height: 60rpx;}}}.quiz_upImg {width: 212rpx;height: 212rpx;position: relative;left: 50%;margin-left: -106rpx;margin-top: 40rpx;}.title {// height: 100rpx;position: relative;font-size: 34rpx;font-family: Source Han Sans CN;font-weight: 500;}.title2 {margin-top: 80rpx;}.title3 {margin-top: 60rpx;}.xuanzhe {position: relative;top: 22rpx;padding: 24rpx;background: #fcfcfc;border-radius: 14rpx;box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);.rrr {width: 12rpx;height: 22rpx;position: absolute;right: 30rpx;margin-top: 10rpx;z-index: 3;}}textarea {position: relative;top: 22rpx;padding: 24rpx;background: #fcfcfc;border-radius: 14rpx;box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);}.textarea1 {height: 70rpx;}.textarea2 {margin-top: 26rpx;height: 200rpx;}.btn {position: absolute;margin: auto;margin-top: 34rpx;border-radius: 24rpx;height: 80rpx;line-height: 80rpx;width: 240rpx;left: 50%;margin-left: -120rpx;background-color: #102841;color: #fff;font-size: 32rpx;text-align: center;}.list {margin-top: 40rpx;.item {width: 90%;padding-bottom: 0rpx;min-height: 80rpx;background: #FFFFFF;box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);border-radius: 12rpx;margin: auto;position: relative;margin-bottom: 28rpx;.red_point {margin-top: -6rpx;margin-right: 14rpx;width: 16rpx;height: 16rpx;border-radius: 50%;background-color: red;position: absolute;right: 4rpx;}.txt {line-height: 96rpx;// height: 36rpx;font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 500;color: #102841;margin-left: 30rpx;width: 470rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}}}
</style>

阿里云OSS上传图片实现流程相关推荐

vue用阿里云oss上传图片使用分片上传只能上传100kb以内的解决办法
首先,vue和阿里云oss上传图片结合参考了这位朋友的 https://www.jianshu.com/p/645f63745abd 文章,成功的解决了我用阿里云oss上传图片前的一头雾水. 该大神 ...
踩坑：阿里云oss上传图片报空指针异常
在做前后端分离项目的时候,要使用阿里云oss远程上传图片 @PostMapping("up")public R uploadOssFile(MultipartFile file){ ...
阿里云oss 上传图片
之前使用过阿里云的oss储存服务,也写了一个上传图片的代码,但是最近在写东西的时候发现对这方面又比较陌生,而且发现在官网找文档也有点费劲,所以把代码写出来之后特地写个博客记录一下,以防以后还需要用到. ...
laravel使用阿里云OSS上传图片
阿里官网文档:https://help.aliyun.com/document_detail/32101.html?spm=a2c4g.11186623.6.1093.294d2589CrVykP 需 ...
阿里云oss 上传图片 python3
# -*- coding: utf-8 -*- import oss2 # oss2包连接阿里云OSS的工具auth = oss2.Auth('AccessKey ID', 'Access Key ...
阿里云oss上传图片
1.首先我们要下载阿里云oss的sdk包:(可以下载原版的,改过的通用版在本人的百度云,嘎嘎嘎~) 2.下载好之后放到项目文件目录里面 3.要在需要的控制器引用这个sdk文件例如: include(& ...
Vue - 超详细 “纯前端“ 将阿里云 OSS 文件删除流程，支持单个 / 批量删除文件（附带完整示例运行源码，保证新手小白 100% 轻松实现删除功能）
前言如果您需要纯前端将文件上传到阿里云 OSS,请访问:Vue - 上传文件到阿里云 OSS 详细教程 / 各种常见问题! 本文站在新手的角度,从 0-1 完成前端 "阿里云oss&quo ...
flutter阿里云OSS图片上传
一.选择图片: 使用插件 image_picker: "^0.5.0+3" 使用image_picker选择图片,代码如下: // 相机拍照或者从图库选择图片pickImage(c ...
微信小程序上传图片到阿里云oss方法
最近开发微信小程序要求上传图片到阿里云oss上,所以就顺手整理一下整个过程啦. 前提开通oss服务和创建oss存储空间啦(这个就自己去解决吧)下面接入正题: 步骤一:配置 Bucket 跨域客户端 ...

阿里云OSS上传图片实现流程

阿里云OSS上传图片实现流程相关推荐

最新文章

热门文章