vue上传图片文件到腾讯COS

准备工作：
下载腾讯COS的js库 cos-js-sdk-v5.js[最好使用mini版本的]（js库分为H5版本小程序版本此处已H5为例）
上传图片的h5页面的域名要加入到腾讯白名单
创建COSHelper.js作为共公上传方法
创建腾讯cos参数配置文件variables.js[与App.vue同级在根目录下面]
上传图片的页面在page下面
文件位置：

上传图片的页面：

<template><!--index.wxml--><view class="container"><view class="content"><u--form labelPosition="left" :model="codeInfo" :rules="rules" ref="uForm" labelWidth="188rpx"><view class="store"><view class="content_form"><u-form-item label="照片:" prop="imgs" borderBottom ref="item1"><u--input type="number" v-model="codeInfo.imgs" border="none" readonly></u--input><u-button slot="right" @click="addImg()" type="success" size="mini">点击上传</u-button></u-form-item><u-grid style="margin-top:10px"><u-grid-item class="addcode-img" v-for="(item,index) in subImgs" :key="index"><u--image:showLoading="true":src='item'width="90px" height="90px" @click="click"></u--image><u-icon class="del_img" name="close-circle-fill" size="20" color="#000"@click="deletePic(index)"></u-icon></u-grid-item></u-grid></view></view></u--form></view></view>
</template>import {uploadFile} from '@/utils/COSHelper.js'export default {components: {},data() {return {subImgs:[],}},props: {},created() {},onLoad(params) {},onReachBottom() {},onShow: function() {},onPullDownRefresh: function() {},methods: {addImg() {uni.chooseImage({count: 9,// sizeType压缩图片sizeType: "compressed",success: (res) => {var limit = 9 - this.subImgs.length;if (limit == 0) {uni.showToast({title: "最多上传九张图片！",icon: "error"})return}uploadFile('.png', res.tempFiles, (res1) => {for (let i = 0; i < res1.length; i++) {this.subImgs.push(res1[i])}})}})},}};

COSHelper.js

// var COS = require('cos-wx-sdk-v5');
var variables = require('../variables.js');
var COS = require('../static/js/cos-js-sdk-v5.js')
// export function uploadFile(ext,filePathArr, callback){export function uploadFile(ext, files, callback) {//设置上传图片的名称let date = new Date();let year = date.getFullYear(); // 年let month = date.getMonth() + 1; // 月let day = date.getDate(); // 日let hour = date.getHours(); // 时let minute = date.getMinutes(); // 分let second = date.getSeconds(); // 秒var datetime = year + '-' + month + '-' + dayvar code = '';//设置长度，这里看需求，我这里设置了4var codeLength = 6;//设置随机字符var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);//循环codeLength 我设置的4就是循环4次for (var i = 0; i < codeLength; i++) {//设置随机数范围,这设置为0 ~ 36var index = Math.floor(Math.random() * 9);//字符串拼接 将每次随机的字符 进行拼接code += random[index];}//下面的return Object.assign中的Key也可以替换为//Key: variables.COS.BaseImagePath + datetime + '/' + new Date().getTime() + code + type,var cos = new COS({SecretId: variables.COS.ID,SecretKey: variables.COS.Key,});var fname = '';var fileList = files.map(function(file) {var timestamp = Date.parse(new Date());fname = timestamp - Math.floor(Math.random(1) * 10000) + 1;var type = '.'+file.type.split('/')[1]?file.type.split('/')[1]:extreturn Object.assign(file, {FilePath: file,// FileSize: file.size,Bucket: variables.COS.Bucket,Region: variables.COS.Region,Body:file,Key: variables.COS.BaseImagePath + datetime + '/' + fname + type,onTaskReady: function(taskId) {// console.log(taskId);}});});cos.uploadFiles({files: fileList,SliceSize: 1024 * 1024 * 10,/* 设置大于10MB采用分块上传 */onProgress: function(info) {var percent = parseInt(info.percent * 10000) / 100;var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100;// console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');},onFileFinish: function(err, data, options) {// console.log('err------', err)// console.log('datadata',data)// console.log('options',options)// console.log(options.Key + '上传' + (err ? '失败' : '完成'));if(err){uni.showToast({title: "上传失败",icon: "error"})}},}, function(err, data) {// console.log(err);// console.log("cgcgcgcgcg",data);// callback(err || data);var imgUrlArr = []for (let i = 0; i < data.files.length; i++) {imgUrlArr.push(variables.COS.Http+data.files[i].data.Location)}// data.files.map(function(item) {//    imgUrlArr.push(//       variables.COS.Http+item.data.Location//    )// })// console.log(imgUrlArr)callback(imgUrlArr)});
}

variables.js

module.exports = {COS:{ID:"",Key:"",Bucket:"",Region:"",BaseImagePath:"",Http:"https://",}
}

vue上传图片文件到腾讯COS相关推荐

php上传文件至腾讯COS
最近初学php,看了一遍教程就开始撸代码,途中不断入坑,硬着头皮一个一个查... PS:本人主要写前端,php小白,不喜勿喷,大神请绕道... 这不今天要写文件上传,由于前端要对接微信小程序,于是乎选 ...
vue上传图片文件到SpringBoot简单实现
springboot代码 @RequestMapping("/uploadImgFile") public Map<String,String> uploadImgFi ...
vue上传图片文件到服务器,vue如何将quill图片上传到服务器
通过自定义quill图片上传按钮,实现将图片上传服务器,并插入服务器地址. export default { name: "editor", props: ['content'], ...
vue图片/文件上传
vue上传图片/文件的方式: vue上传图片有两种:服务器直传和图片接口上传注意:上传文件(图片除外)必须是config.headers = { 'Content-Type': 'multipart ...
vue 上传图片到腾讯云对象存储
需求:上传图片到腾讯云对象存储,返回图片链接地址. 大概流程: 腾讯云对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用户可通过网络随时存储 ...
通过COS上传文件至腾讯云
最近看了一下上传文件至腾讯云.腾讯官方提供的API,cloud.tencent.com/document/pr- 文档上传文档上传首页要首先引入腾讯云封装好的cos-js-sdk-v5.js文件,然 ...
基于腾讯COS对象存储SDK使用Python编写的文件上传工具第二版
更多技术文章请访问我的个人博客http://www.rain1024.com NR-TCloud 1.1,更新于2017-02-08 更新说明: 第一版上传时需要将upload.pyc复制到要上传对象 ...
腾讯 COS 对象存储 - SDK 文件上传对接，示例代码
文章目录腾讯 COS 对象存储 - SDK 文件上传对接,示例代码 1.SDK 2.工具类代码 3.使用示例腾讯 COS 对象存储 - SDK 文件上传对接,示例代码 1.SDK <depe ...
vue上传图片组件编写
点击打开源码 https://github.com/317482454/vue_upload 在线查看地址:http://jqvue.com/demo/vue_upload/demo.html 编写一 ...

vue上传图片文件到腾讯COS

vue上传图片文件到腾讯COS相关推荐

最新文章

热门文章