elementUi--->实现上传图片效果（upload+formData）

现在谈一下elelmentui中使用Upload 上传通过点击或者拖拽上传文件（图片）

<el-upload

　　name="multfile"    //上传的文件字段名

　　class="avatar-uploader"

　　:action="updateUrl"   //必选参数，上传的地址，即接口地址

　　:data="itemForm"   //上传时附带的额外参数

　　:before-upload="beforeAvatarUpload"   //上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

　　:on-success="handleAvatarSuccess"   //文件上传成功时的钩子函数

　　ref="newupload"

>

　　<el-button

　　　　slot="trigger"

　　　　size="small"

　　　　icon="el-icon-upload"

　　　　style="margin-top: 20px;"

　　>选择上传文件

　　</el-button>

　　<div slot="tip" class="el-upload__tip">

　　　　　只能上传jpg/png文件，且不超过500kb

　　 </div>

</el-upload>

 

<el-button type="primary" size="small" @click="submitBtn" style="width: 124px;"

>提 交</el-button>

 

 

script中：

　　

data() {

　　return {

　　　　itemForm: {

　　　　//编辑时数据

　　　　　　token: sessionStorage.getItem('loginToken'),

　　　　　　id: 0,

　　　　　　user_name: '',

　　　　　　user_nike_name: '',

　　　　　　user_sex: 1, //默认 1男 0女

　　　　　　user_phone: '',

　　　　　　user_email: '',

　　　　　　head_img: ''

　　　　},

　　　　fd: '', //向服务器进行传递的参数（带有图片formdata）

　　　　updateUrl: this.serverUrl + '/userInfo/update'

　　}

},

methods：{

　　//成功时保存一下后台给你返回的图片，可以渲染到页面上

　　handleAvatarSuccess(res, file) {

　　　　this.itemForm.head_img = URL.createObjectURL(file.raw)

　　},

　　//上传时，判断文件的类型及大小是否符合规则

　　beforeAvatarUpload(file) {

　　　　const isJPG =file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/gif'

　　　　const isLt2M = file.size / 1024 / 1024 < 2

　　　　if (!isJPG) {

　　　　　　this.$message.warning('上传头像图片只能是 JPG/PNG/GIF 格式!')

　　　　　　return isJPG

　　　　}

　　　　if (!isLt2M) {

　　　　　　this.$message.warning('上传头像图片大小不能超过 2MB!')

　　　　　　return isLt2M

　　　　}

　　　　this.multfileImg = file

　　　　return isJPG && isLt2M

　　　},

　　//点击提交按钮，向服务器传递你要传递的参数，涉及到formData　　

　　submitBtn() {

　　　　this.$refs.itemForm.validate(valid => {

　　　　　　if (valid) {

　　　　　　　　this.fd = new FormData()

　　　　　　　　this.fd.append('token', sessionStorage.getItem('loginToken')) //传其他参数

　　　　　　　　this.fd.append('id', this.itemForm.id)

　　　　　　　　this.fd.append('user_name', this.itemForm.user_name)

　　　　　　　　this.fd.append('user_nike_name', this.itemForm.user_nike_name)

　　　　　　　　this.fd.append('user_sex', this.itemForm.user_sex)

　　　　　　　　this.fd.append('user_phone', this.itemForm.user_phone)

　　　　　　　　this.fd.append('user_email', this.itemForm.user_email)

　　　　　　　　if (this.multfileImg != null) {

　　　　　　　　　　this.fd.append('multfile', this.multfileImg)

　　　　　　　　}

　　　　　　　　api.updateUserInfo(this.fd).then(res => {

　　　　　　　　　　if (res) {

　　　　　　　　　　　　this.$message({ showClose: true, type: 'success', message: '设置成功' })

　　　　　　　　　　　　this.initPage()

　　　　　　　　　　}

　　　　　　　　})

　　　　　　} else {

　　　　　　　　　　this.$message({

　　　　　　　　　　showClose: true,

　　　　　　　　　　type: 'error',

　　　　　　　　　　message: '请检查表单信息的正确性'

　　　　　　　　　　})

　　　　　　　　return false

　　　　　　}

　　　　})

　　

　　}