vue element组件实现将图片上传到本地

ゝ一世哀愁。 2022-02-02 18:55 1174阅读 0赞

### ***我的qq ***2038373094 ###

### ***使用的组件*** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

### *** 这个组件的作用*** ###

1、把用户上传的图片拷贝到千牛云服务器上

2、然后千牛云返回一个图片链接blob:http://localhost:8088/42786950-1ef1-44a3-8315-f3f7d83ed9fc

### ***我们现在要实现的是把用户上传的图片传到本地服务器，然后返回一个本地的形式的链接*** ###

--------------------

### ***1、配置跨域请求*** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

### ***2、更改组件的配置*** ###

***action="异域格式的接口请求"***

***原本访问的是后台地址是        http://localhost:8080/***PsychoSys/returnurl.action

***现在的地址是   /api/PsychoSys/returnurl.action***

***这个很重要，如果不这样写，会报错***

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

### ***3、把从后台返回的地址，赋值给***imageUrl ###

handleAvatarSuccess(res, file) {
            this.form.imageUrl =res;
          },

--------------------

### ***后台部分*** ###

### ***我是用java的ssh框架实现的*** ###

package cn.com.service;
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.FileNotFoundException;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import org.apache.struts2.ServletActionContext;
    import org.springframework.context.annotation.Scope;
    import org.springframework.stereotype.Repository;
    import org.springframework.transaction.annotation.Transactional;
    import cn.com.tools.RandomStr;
    @Repository(value="saveImg")
    @Scope("prototype")
    public class SaveImg {
    	private File file;
    	public File getFile() {
    		return file;
    	}
    	public void setFile(File file) {
    		this.file = file;
    	}
    	@Transactional
    	public String copyfile(){
    		//url
    		 String url="http://localhost:8080/PsychoSys/img/";
    		 String fn=RandomStr.getRandomString(10);
    		 //文件的拷贝
    			//存储图片的地址
    			 HttpServletRequest request = ServletActionContext.getRequest();
    			String dsk=request.getSession().getServletContext().getRealPath("/img");
    			String cfn=dsk+"/"+fn+".jpg";
    			File fl=new File(cfn);
    			FileOutputStream fout=null;
    			InputStream in=null;
    			try {
    			     fout=new FileOutputStream(fl);
    				in=new FileInputStream(file);
    				byte [] by=new byte[1024];
    				int length=0;
    				try {
    					while((length=in.read(by))>-1){
    						fout.write(by, 0, length);
    					}
    					url=url+fn+".jpg";
    				} catch (IOException e) {
    					// TODO Auto-generated catch block
    					e.printStackTrace();
    				}
    			} catch (FileNotFoundException e) {
    				// TODO Auto-generated catch block
    				e.printStackTrace();
    			}finally{
    				try {
    					if(in!=null){
    						in.close();
    					}
    					if(fout!=null){
    						fout.close();
    					}
    					
    				} catch (IOException e) {
    					// TODO Auto-generated catch block
    					e.printStackTrace();
    				} 
    			}
    		//把地址
    			 HttpServletResponse response = ServletActionContext.getResponse();
    				response.setCharacterEncoding("utf-8");
    				try {
    					response.getWriter().write(url);
    				} catch (IOException e) {
    					// TODO Auto-generated catch block
    					e.printStackTrace();
    				}
    		return null;
    	}
    }

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220202/c6c1c6d4ab7a433a8759aab91097ff25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220202/5d3b8cb6d1d645c2b39d1e52b6433301.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20220202/c1636c509a1e4d68890f961cea59937d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3]: /images/20220202/313663b3ade54150a5e07b7289f75bd1.png