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

刺骨的言语ヽ痛彻心扉 2023-07-01 06:25 27阅读 0赞

[https://www.cnblogs.com/wangqi2019/p/10906605.html][https_www.cnblogs.com_wangqi2019_p_10906605.html]

现在谈一下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
    　　　　　　}
    　　　　})

[https_www.cnblogs.com_wangqi2019_p_10906605.html]: https://www.cnblogs.com/wangqi2019/p/10906605.html