vue+iview上传图片

最新推荐文章于 2022-07-27 09:53:55 发布

mokio233

最新推荐文章于 2022-07-27 09:53:55 发布

阅读量2.3k

点赞数 1

分类专栏： vue 文章标签： vue iview

本文链接：https://blog.csdn.net/mokio233/article/details/93887423

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

有时候需要用到图片上传，而且是和其他字符串类型一并上传，比如修改含头像的个人信息时。这时候我们可以利用FormData来拼成一个form表单来上传，这种方法简便可行。我用的是vue+iview。
比如注册个人信息。
首先将页面写出来：

<Form v-model="basicInfo">
	<FormItem label="头像">
      <div>
           <Upload
               :before-upload="upload_handleUpload"
               :show-upload-list="false"
               action="/info/save">
               <img class="headimg" :src="basicInfo.head_url?basicInfo.head_url:bg_default">
           </Upload>
       </div>
    </FormItem>
  	<FormItem label="昵称">
        <Input placeholder="昵称" class="infoInput" v-model.trim="basicInfo.nickname"></Input>
    </FormItem>
    <FormItem label="账号">
        <Input placeholder="账号" class="infoInput" v-model.trim="basicInfo.num"></Input>
    </FormItem>
  </Form>
  <Button type="primary" @click="saveinfo()" >保存</Button>

然后，需要声明用到的变量：

data(){
    return{
    	basicInfo:{ 
			head_url:'',
			nickname:'',
			num:''
		},    
		imgFile :null  //图片文件
    }
 }

用到的方法：

upload_handleUpload（file）{
	this.imgFile = file;
    this.basicInfo.head_url= window.URL.createObjectURL(file);
    return;
},
// 保存修改
saveinfo(){
    let formData = new FormData();

    formData.append('headfile', this.imgFile );
    formData.append('nickname', this.basicInfo.nickname);
    formData.append('num', this.basicInfo.num);
    ...(此处发送请求,参数是 formData ）...
},

整体很简单，能简单实现上传图片，复杂的可以在基础上修改。