普通 input上传
<div class="imgItem">
<input
class="file"
@change="upfile($event,1)"
type="file"
accept="image/*"
name="imgFile"
>
<img v-if="img1" :src="img1" alt class="img_item">
<img src="@images/order/upload.png" alt class="camera" v-show="!img1&&!loading">
<img src="@images/common/add_loading.gif" alt class="camera" v-show="!img1&&loading">
</div>
// 点击上传图片,e图片信息 i 评价的第几个商品 最后一个参数代表上传的第几张图片
upfile(e, i, num) {
const that = this;
let file = e.target.files[0];
let OSS = require("ali-oss");
const client = new OSS({
region: "oss-cn-shenzhen",
accessKeyId: this.oss.AccessKeyId,
accessKeySecret: this.oss.AccessKeySecret,
stsToken: this.oss.SecurityToken,
bucket: this.oss.bucket
});
// 文件名:图片名字加上时间戳和9999以内随机数,防止重名
const imgName = `member_photo/${new Date().getTime()}${Math.floor(
Math.random() * 10000
)}${file.name}`;
// 上传
client
.put(imgName, file)
.then(function(result) {
console.log("啦啦啦啦啦啦", result.url);
that.list.forEach((item, index) => {
if (index == i) {
if (num == 1) {
item.imgs.img1 = result.url;
} else if (num == 2) {
item.imgs.img2 = result.url;
} else if (num == 3) {
item.imgs.img3 = result.url;
}
}
});
})
.catch(function(err) {
console.log("错误", err);
});
},
vant组件上传
// 点击上传图片
onRead(file, detail) {
var that = this;
console.log(file);
this.name = detail.name;
let OSS = require("ali-oss");
// base64格式的图片文件
let urlData = file.content;
const base64 = urlData.split(",").pop();
const fileType = urlData
.split(";")
.shift()
.split(":")
.pop();
function toBlob(urlData, fileType) {
let bytes = window.atob(urlData);
let n = bytes.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bytes.charCodeAt(n);
}
return new Blob([u8arr], { type: fileType });
}
// base64转blob
const blob = toBlob(base64, fileType);
// blob转arrayBuffer
const reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function(event) {
// console.log("英晨", that.oss);
const client = new OSS({
region: "oss-cn-shenzhen",
accessKeyId: that.oss.AccessKeyId,
accessKeySecret: that.oss.AccessKeySecret,
stsToken: that.oss.SecurityToken,
bucket: that.oss.bucket
});
// 文件名:图片名字加上时间戳和9999以内随机数,防止重名
const objectKey = `text/${new Date().getTime()}${Math.floor(
Math.random() * 10000
)}${file.file.name}`;
// arrayBuffer转Buffer
const buffer = new OSS.Buffer(event.target.result);
// 上传
client
.put(objectKey, buffer)
.then(function(result) {
console.log("啦啦啦啦啦啦", result.url);
// let src = result.url;
console.log(detail);
if (detail.name == 1) {
console.log(document.querySelectorAll(".van-uploader"));
}
})
.catch(function(err) {
console.log("cuowu", err);
});
};
},
input 压缩上传oss
// 点击上传图片,e图片信息 i 评价的第几个商品 最后一个参数代表上传的第几张图片
upfile(e, num) {
this.loading = true;
const that = this;
let file = e.target.files[0];
let OSS = require("ali-oss");
const client = new OSS({
region: "oss-cn-shenzhen",
accessKeyId: this.oss.AccessKeyId,
accessKeySecret: this.oss.AccessKeySecret,
stsToken: this.oss.SecurityToken,
bucket: this.oss.bucket
});
// 压缩
lrz(file, { quality: 0.7 }).then(function(rst) {
// 处理成功会执行
console.log("压缩:", rst);
// 压缩后上传
// 文件名:图片名字加上时间戳和9999以内随机数,防止重名
const imgName = `member_photo/${new Date().getTime()}${Math.floor(
Math.random() * 10000
)}${rst.origin.name}`;
// base64格式的图片文件
let urlData = rst.base64;
const base64 = urlData.split(",").pop();
const fileType = urlData
.split(";")
.shift()
.split(":")
.pop();
function toBlob(urlData, fileType) {
let bytes = window.atob(urlData);
let n = bytes.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bytes.charCodeAt(n);
}
return new Blob([u8arr], { type: fileType });
}
// base64转blob
const blob = toBlob(base64, fileType);
// blob转arrayBuffer
const reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function(event) {
// arrayBuffer转Buffer
const buffer = new OSS.Buffer(event.target.result);
// 上传
client
.put(imgName, buffer)
.then(function(result) {
console.log("啦啦啦啦啦啦", result.url);
that.loading = false;
if (num == 1) {
that.img1 = result.url;
} else if (num == 2) {
that.img2 = result.url;
} else if (num == 3) {
that.img3 = result.url;
}
})
.catch(function(err) {
console.log("cuowu", err);
});
};
});
},