<template>
<div class="upload">
<div class="uploadHead">
<div class="uploadHeadTop">出倉單號(hào)</div>
<div class="uploadHeadBottom">LCGT20210822026</div>
</div>
<div class="uploadTips">
<div class="uploadTipsTop">
<div class="uploadTipsTit">目的地</div>
<div class="uploadTipsMsg">高明美宗</div>
</div>
<div class="uploadTipsBottom">
<div class="uploadTipsTit">車牌號(hào)</div>
<div class="uploadTipsMsg">粵X32659</div>
</div>
</div>
<div>
<div class="uploadBtnBox">
<van-uploader :after-read="afterRead">
<div class="uploadBtn">
<div class="uploadBtnL">點(diǎn)此上傳磅單</div>
<div class="uploadBtnR">
<img src="@/assets/uploadimg.png" alt="">
</div>
</div>
</van-uploader>
</div>
<div class="uploadBtnTips">
*該單據(jù)已上傳過磅單 如有要您可繼續(xù)上傳
</div>
</div>
<!-- <div class="uploadOK">出倉單已送達(dá)，無法上傳磅單</div> -->
</div>
</template>
<script>
import { ref ,reactive,getCurrentInstance,onMounted} from 'vue';
export default{
setup() {
},
data() {
return {
};
},
mounted() {
},
computed: {
},
methods:{
uploadImg(blob, base64) {
const formData = new FormData();
formData.append("attach", blob, ".jpg");
this.$http.postImg(this.$api.UPLOAD, formData).then((res) => {
// if (res.code == 0) {
// let obj = {};
// obj["src"] = res.data;
// this.picList.push(obj);
// console.log(this.picList);
// }
console.log(res)
});
},
blobToBase64(blob) {
const self = this; // 綁定this
const reader = new FileReader();
reader.readAsDataURL(blob); // 添加二進(jìn)制文件
reader.onload = function (event) {
const base64 = event.target.result; // 獲取到它的base64文件
const scale = 0.5; // 設(shè)置縮放比例 （0-1）
self.compressImg(base64, scale, self.uploadImg);
};
},
compressImg(base64, scale, callback) {
console.log(`執(zhí)行縮放程序卿拴，scale=${scale}`);
const img = new Image();
img.src = base64;
img.onload = function () {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.setAttribute("width", this.width);
canvas.setAttribute("height", this.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
let base64 = canvas.toDataURL("image/jpeg");
while (base64.length > 1024 * 1024 * 3) {
scale -= 0.01;
base64 = canvas.toDataURL("image/jpeg", scale);
}
const arr = base64.split(",");
const mime = arr[0].match(/:(.*?);/)[1];
const bytes = atob(arr[1]);
const bytesLength = bytes.length;
const u8arr = new Uint8Array(bytesLength);
for (let i = 0; i < bytes.length; i++) {
u8arr[i] = bytes.charCodeAt(i);
}
const blob = new Blob([u8arr], { type: mime });
callback(blob, base64);
};
},
afterRead(files) {
console.log(files.file)
// let files = e.target.files;
this.blobToBase64(files.file);
},
}
}
</script>
<style scoped>
.uploadHead{
width: 622px;
height: 164px;
background: #f3f4f5;
margin: 0 auto;
margin-top: 40px;
text-align: center;
}
.uploadHeadTop{
font-size: 28px;
color: #999999;
padding-bottom: 8px;
padding-top: 32px;
}
.uploadHeadBottom{
color: #333333;
font-size: 40px;
}
.uploadTips{
display: flex;
padding: 0 64px;
margin-top: 64px;
margin-bottom: 120px;
}
.uploadTipsTop{
width: 50%;
text-align: center;
}
.uploadTipsBottom{
width: 50%;
text-align: center;
}
.uploadTipsTit{
font-size: 28px;
margin-bottom: 8px;
color: #999999;
}
.uploadTipsMsg{
font-size: 34px;
color: #333333;
}
.uploadBtnBox{
display: flex;
margin: 0 64px;
}
.uploadBtn{
background: #1F7DE9;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 16px;
width: 622px;
padding: 64px 64px;
box-sizing: border-box;
}
.uploadBtnR img{
width: 174px;
}
.uploadBtnL{
font-size: 34px;
color: #fff;
}
.uploadOK{
color: #d80f09;
font-size: 40px;
text-align: center;
padding-top: 60px;
}
.uploadBtnTips{
width: 324px;
height: 96px;
font-size: 34px;
color: #d80f09;
text-align: center;
margin: 0 auto;
margin-top: 40px;
}
</style>
import axios from "axios";
import QS from 'qs';
import config from "../../config";
axios.defaults.baseURL = config.API_URI;
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;
axios.interceptors.request.use(
config => {
//請(qǐng)求之前(可以設(shè)置token)
// if (localStorage.getItem('token')){ // 判斷是否存在token，如果存在的話乾吻，則每個(gè)http header都加上token
// config.headers.common['Token'] = localStorage.getItem('token') || ''
// }
return config;
},
error => {
alert(error);
return Promise.reject(error);
}
);
axios.interceptors.response.use(
response => {
//數(shù)據(jù)拿到之后
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
alert("Http請(qǐng)求失敗燃观，請(qǐng)聯(lián)系管理員");
return Promise.reject(error.response);
}
);
//成功方法
function successfun(res) {
//處理后臺(tái)返回的非200錯(cuò)誤
if (res.code === 0) {
return res;
} else {
alert(res.msg);
return res;
}
}
//錯(cuò)誤方法
function errorfun(res) {
if (res.code != 1) {
alert(res.msg);
return res;
}
}
export default {
postImg(url, data) {
//post請(qǐng)求
return axios({
method: "post",
url,
data: data,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(
res => {
return successfun(res.data);
},
err => {
return errorfun(err);
}
);
},
post(url, data) {
//post請(qǐng)求
return axios({
method: "post",
url,
data: QS.stringify(data),
}).then(
res => {
return successfun(res.data);
},
err => {
return errorfun(err);
}
);
},
get(url, params) {
//get請(qǐng)求
return axios({
method: "get",
url,
params,
}).then(
res => {
return successfun(res.data);
},
err => {
return errorfun(err);
}
);
}
};
第一個(gè)文件，afterRead方法是vant框架的上傳獲取原生文件流
第二個(gè)文件追他，設(shè)置多一個(gè)方法postImg坟募，設(shè)置headers
