要实现点击上传后上传图片资源到第三方服务器上
利用element组件 随便搞一个上传框 和创建一个vue文件 准备一张图片 另外有第三方服务器的地址id k 这里用的是腾讯云的cos对象存储桶
第一步 安装JavaScript SDK
npm i cos-js-sdk-v5 --save
第二步创建文件切准备好上传的基础属性
<template>
<div>
<!-- el-upload 组件 该组件内部会自己使用原生的xhr进行请求的发送-->
<!-- list-type 是列表的类型 可选值 text/picture/picture-card -->
<!-- action 是上传的地址 -->
<!-- name 是上传的文件字段名 -->
<!-- headers 是请求头的信息 -->
<!-- on-success 上传成功的钩子函数，这里可以获取到服务器返回的数据 -->
<!-- auto-upload 自动上传功能,默认为true -->
<!-- http-request 覆盖默认的上传行为，自己写上传的逻辑功能-->
<!-- file-list是默认展示的图片内容，一般用于做回显功能 ; file-list 的数据不是双向绑定的 -->
<el-upload
list-type="picture-card"
:file-list="fileList"
:on-remove="onRemove"
:on-preview="onPreview"
:on-change="onChange"
:before-upload="beforeUpload"
action="#"
:class="{ hidden: fileComputed }"
:http-request="httpRequest"
>
<i class="el-icon-plus" />
<el-progress v-if="percentageShow" :percentage="percentage"></el-progress>
</el-upload>
<el-dialog title="预览图片" :visible.sync="showDialog" width="30%">
<img :src="imgUrl" style="width: 100%" alt="" />
</el-dialog>
</div>
</template>第三步引入COS
import COS from "cos-js-sdk-v5";第四步定义data
data() {
return {
fileList: [], // 图片地址设置为数组
showDialog: false, // 控制显示弹层
imgUrl: "",
currentFileUid: "", // 当前上传的uid
percentage: 0, // 进度条
percentageShow: false, // 进度条显示
};
},第五步事件方法逻辑编辑
methods: {
// 移除事件
onRemove(val) {
this.fileList = this.fileList.filter((item) => item.uid !== val.uid);
},
// 预览事件
onPreview({ url }) {
this.imgUrl = url;
this.showDialog = true;
},
// 文件发送改变的时候触发==> 添加文件、上传成功和上传失败时都会被调用
// file是选择的文件信息(上传的信息)
// fileList 是最新的上传列表
// 不能使用push，原因是因为会调用多次！就会不断push到里面去
onChange(file, fileList) {
this.fileList = fileList.map((item) => item);
},
// 上传前的操作
beforeUpload(file) {
// 体积检测
const maxSize = 7; // 最大5M
if (file.size / 1024 / 1024 > maxSize) {
this.$message.warning(`体积不能超过${maxSize}M`);
return false;
}
// 类型检测
const types = ["image/png", "image/jpg", "image/jpeg", "image/gif"];
if (!types.includes(file.type)) {
this.$message.warning("文件支支持jpg,png,gif,jpeg");
return Promise.reject("类型错误");
}
// 记录这一次上传的uid
this.currentFileUid = file.uid;
// 进度条打开
this.percentageShow = true;
},
// 上传行为
httpRequest(file) {
console.log(file);
// 将来也可以写自己的上传逻辑！
// 调用第三方的sdk实现上传功能
// 文档地址：上传的服务地址
// cos.putObject(配置对象，回调函数)
cos.putObject(
{
Bucket: "xxxxxxxxxxxxxxx" /* 填入您自己的存储桶，必须字段 */,
Region: "xxxxxxxxxxxxxxx" /* 存储桶所在地域，例如ap-beijing，必须字段 */,
Key: file.file
.name /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
StorageClass: "STANDARD",
Body: file.file, // 上传文件对象
onProgress: (progressData) => {
// 上传中执行事件
this.percentage = progressData.percent * 100;
},
},
(err, data) => {
if (err) {
console.log(err);
this.percentageShow = false;
return this.$message.error("上传失败");
}
// 成功后的处理逻辑
this.fileList = this.fileList.map((item) => {
if (item.uid === this.currentFileUid) {
item.url = "http://" + data.Location; // 替换真正的地址
item.upload = true; // 记录该文件已经上传完成
}
return item;
});
// 关闭
setTimeout(() => {
this.percentageShow = false;
}, 1000);
}
);
},
},最后判断是否上传了
computed: {
// 设定一个计算属性 判断是否已经上传完了一张
fileComputed() {
return this.fileList.length === 1;
},
},本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
