Upload an image on ajax to get the image path

var formData = new FormData ();
formData.append ("image", document.getElementById ("FileUpload"). Files [0]);
$.ajax ({

) 
url: url,
type: "post",
data: formData,
cache: false,
/**
*falseContent-Type
*/
contentType: false,
/**
* falsejQuery formdata 
* XMLHttpRequest formdata 
*/
processData: false,
success: function (data) {
    console.log(data)
    if (data.code == "200") {
        this.imageUrl = data.data
    }
}

})
cannot get the path outside ajax, so this.imageUrl ="
appears. Why? Who has encountered similar problems?

Ajax
Mar.28,2021

you can define a global variable and assign the acquired path to the global variable

ajax with a delay, but of course you can't get it outside.

Ajax is asynchronous 

    if (data.code == '200') {
        this.imageUrl = data.data
    }

the this here has pointed to the callback function that does not work externally
you can change it to: 

var imageUrl = '';
//Js

$.ajax({//......
    if (data.code == '200') {
        imageUrl = data.data
        console.log(imageUrl); // 'https://img.codeshelper.com/upload/img/2021/03/27/uy5sto4o2me13502.jpg'
    }
   
//...
console.log(imageUrl); // ''
//    
// ajax

Previous: How does the vue parent component modify the value of a child component in a list child component without affecting other child components?

Next: How can the vue input change event get the value and the value passed by itself at the same time?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu