Image upload (binary file stream)

Business requirements:

  • File upload is an essential function in project development. At present, most file uploads are uploaded in the form of file streams. With the progress of technology, the emergence of cloud service technology, now upload files more quickly and more convenient than the original, the management of uploaded files more convenient than before;
  • In order to take into account the original project, the upload file is not used in ali cloud OSS file direct transmission, but in the form of background auxiliary storage upload for file storage. File uploading is relatively slow and the waiting time is a bit long. Fetch file does not return an absolute address link like OSS direct, but returns a file key, which is exchanged for the image address through the specified parameter concatenation;
  • This referred to as “file stream upload”, there were some mistakes in the early development, now the original file stream upload file specific steps to do the corresponding analysis, so as to use in the future development process.

Effect:

  • Note: Images uploaded successfully will be displayed in the gray image area on the right.

Layout code 1:

  • Based on [Vue]
  • The el-Input tag of elementUI is combined with the upload tag of input file.
  • WtLoading is the loading state of EL-button loading of UI frame.

Style code:

// Upload button style layout.uploadBtn {
		display: block;
		height: 100%;
		width: 100%;
		position: relative;
		overflow: hidden;
	}

.uploadBtn>input[type="file"] {
		width: 100%;
		opacity: 0;
		cursor: pointer;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
}
Copy the code

Vue:

// Mode 1: Based on vUE
uploadImg(file) {
	// Use formData format
	let fd = new FormData();
	fd.append("imgData", file);
	this.$axios
		.post("Picture upload API", fd)
		.then(res= > {
			let data = res.data;
			if (data.code == "1") {
				// Returns the generated image ID
				this.imgGid = data.imgGid;
				// Get the absolute address
				this.imageUrl = this.pic + data.imgGid;
				console.log('Upload successful! ')}else {
				console.log('Upload failed! ')}}); }Copy the code

Layout code 2:

  • Based on JavaScript
  • Upload binary stream file with the help of jQuery form submission;
  • A loading. GIF dynamic image will be dynamically loaded during the upload. The loading image will be removed when the upload is complete or fails.

Implementation code [JavaScript]:

const saveReport = function() {
	/* jquery. form submits data */
	$('#addImg').ajaxSubmit({
		type: 'post'.url: 'Upload interface API'.data: {
			picType: 'jpg' // Image format
		},
		dataType: 'json'.success: function(res) {
			if (res.code == 1) {
				/* The generated image ID */
				avatars = res.imgGid;
				/* Splice images */
				$('#upJPG').prepend('<img src="' + res.imgGid + '" class="imgStyle" />');
				/* Delete image */
				$('.close').on('click'.function(e) {
					/* Stop images from jumping */
					e.stopPropagation();
					/* Dom manipulation */}); }},error: function(err) {
			hintCard('Network error'); }});/* Prevent the form from submitting itself again and jumping to the page */
	return false;
}
Copy the code