图片格式,大小限制
<el-form-item label="图片:" prop="tempImagePath">
<el-upload
class="upload"
accept="image/jpeg"
:show-file-list="false"
list-type="picture-card"
:headers="{ token: token}"
:action="actionUrl"
:before-upload="beforeAvatarUpload"
:on-success="handleAvatarSuccess">
<img v-if="temp.tempImagePath"
:src="temp.tempImagePath" width="146px" height="146px"/>
<i v-else class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">
只能上传.gif/.jpeg/.png文件且小于500K
</div>
</el-upload>
</el-form-item>
// js
beforeAvatarUpload (file) {
const imgType = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt500k = file.size / 1024 / 1024 < 0.48;
if (!imgType) {
this.$message.error("上传图片只能是 JPG和png 格式!");
return false;
}
if (!isLt500k) {
this.$message.error("上传图片大小不能超过 500k!");
return false;
}
},
图片压缩
// 下载插件
npm i compressorjs
//引入
import Compressor from 'compressorjs'
new Compressor(file, {
quality: 0.2,
success(result) {
console.log(result) // 处理后的文件流BLOB
// 以下为文件本地保存、下载查看压缩后的文件效果和大小,可省略
const blobUrl = window.URL.createObjectURL(result)
const a = document.createElement('a')
a.download = result.name
a.style.display = 'none'
a.href = blobUrl
// 触发点击
document.body.appendChild(a)
a.click()
// 然后移除
document.body.removeChild(a)
// 以下为将文件加载到formData中以便文件上传
const formData = new FormData()
formData.append('file', result, result.name);
console.log('formdata', formData)
//文件上传请求
axios.post('/path/upload', formData).then(() => {
console.log('Upload success');
});
},
error(err) {
//错误处理
console.log(err.message)
}
})
将本地图片转化为Base64
<body>
<div class="fu">
<div class="zi"></div>
<input type="file" id="base64">
</div>
<script>
let file = document.querySelector('#base64')
file.addEventListener('change',(res)=>{
console.log(res.target.files);
let files = res.target.files[0]
var reader = new FileReader()
reader.readAsDataURL(files)
// 成功调用
reader.onload=(res)=>{
console.log(res.target.result);
}
// 失败调用
reader.onerror=(err)=>{
console.log(err);
}
})
</script>
</body>