ajax上传图片获取图片路径

Question

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

url: url,
type: 'post',
data: formData,
cache: false,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success: function (data) {
    console.log(data)
    if (data.code == '200') {
        this.imageUrl = data.data
    }
}

})
在ajax外获取不到路径，会出现this.imageUrl = ''
这是为什么呢？谁也遇到过类似的问题？

Answer 1

你可以定义个全局变量，把获取到的路径赋值给全局变量啊

Answer 2

ajax有延时的，在外面当然获取不到。

Answer 3

Ajax是异步机制

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

这里的this已经指向了回调函数 对外部是不生效的
你可以改成:

var imageUrl = '';
//Js默认写在文件中的变量是全局变量

$.ajax({//......省略
    if (data.code == '200') {
        imageUrl = data.data
        console.log(imageUrl); // 输出'http://fool.jpg'
    }
   
//...略
console.log(imageUrl); // 输出''
// 这里依然获取不到 是因为 虽然代码在下面，但是执行的时间 要早于上面的回调函数
// 如果做什么操作记得写在ajax的回调里