vue nui app sunui-upimg 上传图片
压缩图片sizeType: ["compressed"], 只有小程序-app才有效果
chooseImage() {
let _self = this;
uni.chooseImage({
count: _self.upload_count - _self.upload_before_list.length,
sizeType: ["compressed"],
sourceType: ["album", "camera"],
success:async function (res) {
// #ifdef H5
await _self.getImageInfo(res,res.tempFilePaths[0]);
// #endif
// #ifdef MP-WEIXIN
for (let i = 0, len = res.tempFiles.length; i < len; i++) {
res.tempFiles[i]["upload_percent"] = 0;
res.tempFiles[i]["path2"] =res.tempFiles[i]["path"];
_self.upload_before_list.push(res.tempFiles[i]);
}
_self.upload_cache =res.tempFilePaths;
_self.upload(_self.upload_auto);
// #endif
},
fail: function (err) {
console.log(err);
},
});
},
h5 压缩功能问题，h5显示 竖图问题ctx.rotate(270 * Math.PI / 180)
getImageInfo(res,src) {
let _self = this
let imgSrc = '';
uni.getImageInfo({
src,
success(res2) {
let canvasWidth = res2.width //图片原始长宽
let canvasHeight = res2.height
let img = new Image()
img.src = res2.path
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width =canvasWidth/2;
canvas.height =canvasHeight/2;
if(canvasHeight>canvasWidth){
canvas.width = canvasHeight/2;
canvas.height =canvasWidth/2;
ctx.rotate(270 * Math.PI / 180);
ctx.drawImage(img, -canvasWidth/2, 0, canvasWidth/2, canvasHeight/2);
}else
ctx.drawImage(img, 0, 0, canvasWidth/2, canvasHeight/2);
canvas.toBlob(function(fileSrc) {
imgSrc = window.URL.createObjectURL(fileSrc)
for (let i = 0, len = res.tempFiles.length; i < len; i++) {
res.tempFiles[i]["upload_percent"] = 0;
res.tempFiles[i]["path2"] =imgSrc;
_self.upload_before_list.push(res.tempFiles[i]);
}
_self.upload_cache =[imgSrc];
_self.upload(_self.upload_auto);
})
}
})
},
<template>
<view class="sunui-uploader-bd">
<view class="sunui-uploader-files">
<block v-for="(item, index) in upload_before_list" :key="index">
<!-- :class="[
item.upload_percent < 100 ? 'sunui-uploader-file-status' : '',
]" -->
<view v-show="item.path2"
class="sunui-uploader-file"
@click="previewImage(index)"
>
<!-- step1.这里修改服务器返回字段 ！！！ -->
<image
class="sunui-uploader-img"
:style="upload_img_wh"
:src="item.path2"
mode="aspectFill"
/>
<view
class="sunui-img-removeicon right"
@click.stop="removeImage(index)"
v-show="upimg_move"
>×</view
>
<!-- <view class="sunui-loader-filecontent" v-if="item.upload_percent < 100">{{ item.upload_percent }}%</view> -->
</view>
</block>
<view
v-if="upload_before_list.length==0"
hover-class="sunui-uploader-hover"
class="sunui-uploader-inputbox"
:class="upload_bg_img == 2 ? 'bg2' : ''"
@click="chooseImage"
:style="upload_img_wh"
>
<view>
<!-- <text class="iconfont icon-mn_shangchuantupian" style="color: #666;"></text> -->
<image class="icon-img" src="/static/img/photo.png" />
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
upload_len: 0,
upload_cache: [],
upload_cache_list: [],
upload_before_list: [],
upload_before_listsss:[]
};
},
name: "sunui-upimg",
props: {
// 服务器url
url: {
type: String,
default:
"https://a3.dns06.net.cn/app/index.php?i=2&c=entry&a=wxapp&do=Upload_qiniu_b&m=jzwx_a",
},
// 上传样式宽高
upload_img_wh: {
type: String,
default: "100%;",
},
upload_bg_img: {
type: String,
default: "",
},
// 上传数量
upload_count: {
type: [Number, String],
default: 1,
},
// 是否自动上传? 可以先用变量为false然后再改为true即为手动上传
upload_auto: {
type: Boolean,
default: true,
},
// 是否显示删除
upimg_move: {
type: Boolean,
default: true,
},
// 服务器预览图片
upimg_preview: {
type: Array,
default: () => {
return [];
},
},
// 服务器返回预览(看服务器卡顿情况设定)
upimg_delaytime: {
type: [Number, String],
default: 300,
},
// 请求头信息
header: {
type: Object,
default: () => {
return {};
},
},
},
async created() {
let _self = this;
setTimeout(() => {
this.upload_before_list = this.upload_before_list.concat(
this.upimg_preview
);
this.upload_len = this.upload_before_list.length;
this.upimg_preview.map((item) => {
// step2.这里修改服务器返回字段 ！！！
this.upload_cache_list.push(item.imgUrl.imgUrl);
});
this.emit();
}, this.upimg_delaytime);
},
methods: {
upImage(paths, header) {
let _self = this;
const promises = paths.map(function (path) {
return promisify(upload)({
url: _self.url,
path: path,
name: "file",
extra: header,
_self: _self,
});
});
uni.showLoading({
title: `正在上传...`,
});
console.log("upImage-promises",promises)
Promise.all(promises)
.then(function (data) {
uni.hideLoading();
_self.upload_cache_list.push(...data);
console.log("upImage-upload_cache_list",data, _self.upload_cache_list)
console.log("upImage-upload_before_list", _self.upload_before_list)
var src=_self.upload_before_list[0].path2;
uni.getImageInfo({
src,
success(res2) {
console.log('压缩后后后', res2)
}
})
_self.emit();
})
.catch(function (res) {
uni.hideLoading();
});
},
chooseImage() {
let _self = this;
uni.chooseImage({
count: _self.upload_count - _self.upload_before_list.length,
sizeType: ["compressed"],
sourceType: ["album", "camera"],
success:async function (res) {
// #ifdef H5
await _self.getImageInfo(res,res.tempFilePaths[0]);
// #endif
// #ifdef MP-WEIXIN
for (let i = 0, len = res.tempFiles.length; i < len; i++) {
res.tempFiles[i]["upload_percent"] = 0;
res.tempFiles[i]["path2"] =res.tempFiles[i]["path"];
_self.upload_before_list.push(res.tempFiles[i]);
}
_self.upload_cache =res.tempFilePaths;
_self.upload(_self.upload_auto);
// #endif
},
fail: function (err) {
console.log(err);
},
});
},
async upload(upload_auto) {
let _self = this;
upload_auto
? await _self.upImage(_self.upload_cache, _self.header)
: console.warn(`传输参数:this.$refs.xx.upload(true)才可上传,默认false`);
},
getImageInfo(res,src) {
let _self = this
let imgSrc = '';
uni.getImageInfo({
src,
success(res2) {
let canvasWidth = res2.width //图片原始长宽
let canvasHeight = res2.height
let img = new Image()
img.src = res2.path
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width =canvasWidth/2;
canvas.height =canvasHeight/2;
if(canvasHeight>canvasWidth){
canvas.width = canvasHeight/2;
canvas.height =canvasWidth/2;
ctx.rotate(270 * Math.PI / 180);
ctx.drawImage(img, -canvasWidth/2, 0, canvasWidth/2, canvasHeight/2);
}else
ctx.drawImage(img, 0, 0, canvasWidth/2, canvasHeight/2);
canvas.toBlob(function(fileSrc) {
imgSrc = window.URL.createObjectURL(fileSrc)
for (let i = 0, len = res.tempFiles.length; i < len; i++) {
res.tempFiles[i]["upload_percent"] = 0;
res.tempFiles[i]["path2"] =imgSrc;
_self.upload_before_list.push(res.tempFiles[i]);
}
_self.upload_cache =[imgSrc];
_self.upload(_self.upload_auto);
})
}
})
},
previewImage(idx) {
let _self = this;
let preview = [];
for (let i = 0, len = _self.upload_before_list.length; i < len; i++) {
// step3.这里修改服务器返回字段 ！！！
console.log("previewImage-upload_before_list",_self.upload_before_list[i])
preview.push(_self.upload_before_list[i].path);
}
uni.previewImage({
current: idx,
urls: preview,
});
},
removeImage(idx) {
let _self = this;
_self.upload_before_list.splice(idx, 1);
_self.upload_cache_list.splice(idx, 1);
// _self.upload_before_listsss.splice(idx, 1);
_self.upload_len = _self.upload_before_list.length;
_self.emit();
},
emit() {
let _self = this;
_self.$emit("change", _self.upload_cache_list);
},
},
};
const promisify = (api) => {
return function (options, ...params) {
return new Promise(function (resolve, reject) {
api(
Object.assign({}, options, {
success: resolve,
fail: reject,
}),
...params
);
});
};
};
const upload = function (options) {
let url = options.url,
_self = options._self,
path = options.path,
name = options.name,
// data = options.data,
extra = options.extra,
success = options.success,
progress = options.progress,
fail = options.fail;
const uploadTask = uni.uploadFile({
url: url,
filePath: path,
name: name,
formData: extra,
success: async function (res) {
var data = res.data;
// console.warn(
// "sunui-upimg - 如发现没有获取到返回值请到源码191行修改后端返回图片路径以便正常使用插件",
// JSON.parse(data)
// );
var s = JSON.parse(data);
if (s.success) {
// _self.upload_before_list[0].uri= s.data.uri;
// _self.upload_before_list[0].path= s.data.path;
// _self.upload_before_list[0].imgUrl= s.data.imgUrl.imgUrl;
success( s.data);
} else {
uni.hideLoading();
fail(data);
}
},
fail: function (res) {
if (fail) {
fail(res);
}
},
});
uploadTask.onProgressUpdate(async function (res) {
// for (let i = 0, len = _self.upload_before_list.length; i < len; i++) {
// _self.upload_before_list[i]["upload_percent"] = await res.progress;
// }
// _self.upload_before_list = _self.upload_before_list;
_self.upload_len = _self.upload_before_list.length;
});
};
</script>
<style lang="scss">
@font-face {
font-family: "iconfont";
src: url("//at.alicdn.com/iconfont.eot?t=1574391686418");
/* IE9 */
src: url("//at.alicdn.com/iconfont.eot?t=1574391686418#iefix")
format("embedded-opentype"),
/* IE6-IE8 */
url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMkAAsAAAAAB2QAAALYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCYIJEATYCJAMICwYABCAFhG0HPRt3BhEVlCNkH4dxmzUXNsJHc1SNfR9KTkCtiXv/l+QDBQSFRBJdKoEsg60HUgCsOpWVnWxNx3BvVITqkj3fepbtzM/OfDo4D86iFEIiJAeX02+Bh/O84TLmsrEnYBxQoHtgm6xACoxTkN0zFsgEdQynCShpq7cwbsK0eTKROSkgbNu8cbUspRFrkoNMkC9ZGYWjcrJkX/IIR/zPhz/6hIxELmWmzdowfp1RvxdbYWm1VrUMCO54JvDrSNEbkTCv1DJDGvp6S5VUX9SRdSUHfi+u1cBZ7R+PQMgzEyugNcU5J67DO9VfJiCigD042iuNQqXSunGRfvrWV6/mvX49/+3bhW/eLHr4puOFtxMfvO5w9tX8yv7rIbf3Rrl84Mbe66XSzWet46nn/etMuALua5LqNZUqpKdfDKjsv2qef+yambJsTWM2zDtKIQ0pS7msvSTUpn1tNyts2xZmWUyw3LI4bPisSZNyOUc2y4/scfZs3QZ1UcgqUWtkVednsvnVs7NOHzmqglXIBnqU7+/M9Hp3y3L2RLWYA9uhlat61/LGGwVqt9Nvafv/8R2fmg/pu7LesH9ZOYL3/6e3P6Z2O0rbIztra+Dtc1u2RY1vapOocEtDiT0Kd1VUUkIN42joS19Fk1s1BVmKy0OioA2kMp1REdcbcsr6QV5mJJT0MnF9mbQRchZiET29CAT1fSBR1y1I1fdFRdwPcpr6Q179cIaSBaHRjmVdgxFjCSvGFuonmGYcpK1nESRfUC1dRUm+T3ggeeOEOIiywRwHpDHm+FUlzBIkjT1k5DzsuhEmGi02HGjmKQ1DWfaioBn7gzAWQRWGWqD2BIzGaCDRm4nc+y+QsuhUqKaqyviAiGcGB7FA1AKVS4ZWVddyibdSEoxJQCKjHsjIMNTpjMBUPsxCDRbQPTyTVGh1k20lwfyy/un2QYmpTII1I9Vo+1B4XQ2q0QvwvExGfTgA")
format("woff2"),
url("//at.alicdn.com/iconfont.woff?t=1574391686418") format("woff"),
url("//at.alicdn.com/iconfont.ttf?t=1574391686418") format("truetype"),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url("//at.alicdn.com/iconfont.svg?t=1574391686418#iconfont") format("svg");
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-mn_shangchuantupian {
&:before {
content: "e559";
}
font-size: 3em;
}
.sunui-uploader-img {
display: block;
height: 382upx;
border-radius: 20upx;
}
.img {
border-radius: 20upx;
}
.sunui-uploader-input {
position: absolute;
z-index: 1;
top: 0;
left: 0;
100%;
height: 100%;
opacity: 0;
}
.sunui-uploader-inputbox {
position: relative;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
min-height: 350upx;
height: 382upx;
background-image: url("/static/img/v4-icon4.png");
background-repeat: no-repeat;
background-size: 100%;
border-radius: 18upx;
background-position: left top;
}
.bg2 {
background-image: url("/static/img/v4-icon3.png");
}
.sunui-img-removeicon {
position: absolute;
color: #fff;
24px;
height: 24px;
line-height: 24px;
z-index: 2;
text-align: center;
background-color: #fe3333;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
&.right {
top: 0;
right: 0;
}
}
.sunui-uploader-file {
position: relative;
margin-bottom: 16rpx;
border-radius: 20upx;
}
.sunui-uploader-file-status:before {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 20upx;
}
.sunui-loader-filecontent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
z-index: 9;
}
.sunui-uploader-bd {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.sunui-uploader-files {
80.4%;
border-radius: 20upx;
}
.sunui-uploader-file:nth-child(4n + 0) {
margin-right: 0;
}
.sunui-uploader-inputbox > view {
text-align: center;
}
// .sunui-uploader-file-status:after {
// content: " ";
// position: absolute;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
// background-color: rgba(0, 0, 0, 0.5);
// }
// .sunui-uploader-hover {
// box-shadow: 0 0 0 #e5e5e5;
// background: #e5e5e5;
// }
.icon-img {
116upx;
height: 116upx;
}
</style>