Element:el-upload 图片上传

html部分：

<el-upload

ref="upload"

:limit="1"

class="image-uploader"

:auto-upload="true"

:action="FTP_URL"

accept="image/jpeg,image/jpg,image/png"

:http-request="uploadMethod"

:before-upload="beforeUpload"

:show-file-list="false"

>

<i class="el-icon-plus" />

</el-upload>

FTP_URL写在

data () {

return {

FTP_URL: window.$SERVER_URL.BASE_URL+`/api/v1/menus/uploadicons`

}

}

 

后台接口 /api/v1/menus/uploadicons  参数 icons

methods: {

uploadMethod (param) {

let img = new FormData()

img.append('icons', param.file)

let conf = {

headers: {

'Content-Type': 'multipart/form-data'

}

}

this.axios.post('/api/v1/menus/uploadicons', img, conf)

.then(res => {

this.form.Icon = res  // 此处res为后台返回图片的相对路径

this.image = window.$SERVER_URL.BASE_URL+res // 路径拼接后，可以用于显示预览图片

this.$refs.upload.clearFiles() // 有时候第一次点击上传成功，第二次无反应 需要做一个清除操作

})

}

}