Shulou(Shulou.com)05/31 Report--

This article mainly introduces vue how to use el-upload to achieve file upload function related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this vue how to use el-upload to achieve file upload function article will have a harvest, let's take a look at it.

Upload.vue

Select a file, click upload export default {name:'UploadUi', data () {return {name:'', fileList: []}}, methods: {/ / obtain the file list handleChange (file) through the onchanne trigger method FileList) {this.fileList = fileList Console.log (fileList)}, upload () {let fd = new FormData (); fd.append ("name", this.name); this.fileList.forEach (item= > {/ / raw is the real file fd.append ("files", item.raw) / / console.log (item.raw)}) this.$axios.post ('/ uploadUi',fd) .then (res= > {if (res.data.code = 200) {/ / console.log (res) This.$message ('upload successful')} else {this.$message ('failed'})},}}

Springboot background uploadController.java

Package com.example.demo.controller; import java.io.File;import java.io.FileOutputStream;import java.io.InputStream;import java.util.List; import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.PutMapping;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody Import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile; import com.example.demo.entity.ListParam;import com.example.demo.entity.MyUser;import com.example.demo.entity.Result @ RestController@ResponseBody@CrossOrigin@RequestMapping ("/ api") public class UploadController {@ PostMapping ("/ uploadUi") public Result upFile (@ RequestParam ("name") String name,@RequestParam ("files") MultipartFile [] files) {System.out.println ("start"); System.out.println (name) If (files! = null) {for (MultipartFile file: files) {String fileName = file.getOriginalFilename (); System.out.println (fileName); try {File mkdir = new File ("F:\\ app\\ file") If (! mkdir.exists ()) {mkdir.mkdirs ();} / / defines the output stream and writes the file to the hard disk FileOutputStream os = new FileOutputStream (mkdir.getPath () + "\\" + fileName); InputStream in = file.getInputStream () Int b = 0; while ((b=in.read ())! =-1) {/ / read file os.write (b);} os.flush (); / / close stream in.close () Os.close ();} catch (Exception e) {e.printStackTrace (); return new Result (401, "failure");}} return new Result (200, "success") } else {return new Result (401, "File not found");} this is the end of the article on "how vue uses el-upload to achieve file upload". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how vue uses el-upload to achieve file upload function". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.