The vue element component realizes uploading pictures to the local

Posted by spicerje on Tue, 12 Nov 2019 22:52:21 +0100

My qq 2038373094

Components used

The function of this component

1. Copy the pictures uploaded by users to Qianniu cloud server

2. Then Qianniu cloud returns a picture link blob:http://localhost:8088/42786950-1ef1-44a3-8315-f3f7d83ed9fc

What we want to achieve now is to send the pictures uploaded by users to the local server, and then return a local link

1. Configure cross domain requests

2. Change the configuration of components

action = "interface request in foreign format"

Originally, the background address was http://localhost: 8080/psychasys/returnurl.action

The current address is / API / psychasys / returnurl.action

This is very important. If you don't write like this, you will report an error

 

3. Assign the address returned from the background to imageUrl

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

Background part

I implemented it with ssh framework of java

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);
		 //Copies of documents
			//Address where pictures are stored
			 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();
				} 
			}
		//Place address
			 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;
	}
}

 

Topics: Java ssh Apache