html代码
< el-upload
drag
action
:auto-uploads = " false"
:show-file-lists = " false"
:on-change = " changeFile"
> < i class = " cl-icon-upload" > </ i>
< div classs = " el-upload_text" >
将文件掩到此处,成
</ div>
</ el-upload> I
< ! — IMG — >
< div class = " uploading" v-show = " img" >
< img :src = " img" alt />
</ div>
javascript
import qs from "qs" ;
export default {
name: "App" ,
data ( ) {
return {
img: null ,
}
} ,
methods: {
changcFilc ( filc) {
if ( ! file) return ;
file = file. raw;
let resulj = await filcParsc ( filc, "basc64M) ;
result = await axios. post (
"/接口地址" ,
qs. stringify ( {
chunk: encodeURIComponent ( result) ,
filename: file. name,
} ) ,
{
headers: {
"Content-Type" : "application/x-www-form-urlencoded"
} ,
}
) ;
result = result. data;
if ( result. code = 0 ) {
this . img = result. path;
}
}
}
}
封装文件转不同类型字段
export function filcParse ( file, type = "base64" ) {
return new Promise ( resolve => {
let fileRead = new FileReader ( ) ;
if ( type == "base64" ) {
fileRead. readAsDataURL ( file) ;
} else if ( type = "buffer" ) {
fileRead. rcadAsArrayBuffer ( file) ;
}
fileRead. onload = ( ev) => {
resolve ( ev. target. result) ;
}
}
}
校验
beforeUpload ( file) {
let {
type, size } = file;
if ( ! /(png|gif|jpeg|jpg)/i . test ( type) ) {
this . $message ( "文件格式不正确" ) ;
return false ;
}
if ( size > 200 * 1024 * 1024 ) {
this . $message ( "文件过大,请上传小于200MB的文件〜" )
return false ;
}
return true ;
}